javascript - 如果表单验证为假（VueJS），则防止将数据发送到数据库/服务器

问题描述

如果表单验证为假，我想停止发送信息。我有一个保存按钮，其中包含两个功能：

<span class="logInBTN" v-on:click="validationFields(); function2(model)">Save</span>

表单验证正在处理中validationFields()：

validationFields() {
  if (this.model.codePerson == '') {
    document.getElementById('codePerson').style.borderColor = "red";
    this.errors.push("Choose a type!\n");
    falseValidation = true;
  } else {
    document.getElementById('codePerson').style.borderColor = "#CCCCCC";
  }

  if (falseValidation == true) {
    alert("Form validation:\n" + this.errors.join(""));
  }
}

所以如果没有从输入字段中选择类型，function2()一定不要继续。

更新1：

<script>
    export default {
        components: {

        },
        data(){
            return {
                errors: [];
            },
        },
        methods: {
            validationFields() {

                this.errors = [];
                var falseValidation = false;

                if (this.model.codePerson == '') {
                    document.getElementById('codePerson').style.borderColor = "red";
                    this.errors.push("Choose a type!\n");
                    falseValidation = true;
                } else {
                    document.getElementById('codePerson').style.borderColor = "#CCCCCC";
                }

                if (falseValidation == true) {
                alert("Form validation:\n" + this.errors.join(""));
                }

                if(falseValidation == false){
                    this.createEori(eoriData);
                }
            }

            createEori(eoriData) {
                eoriData.state = '1';
                eoriData.username = this.$session.get('username');
                console.log("updateEori state: " + JSON.stringify(eoriData));
                const url = this.$session.get('apiUrl') + 'registerEORI';
                this.submit('post',
                    url,
                    eoriData
                );
            },

            submit(requestType, url, submitData) {
                this.$http[requestType](url, submitData)
                    .then(response => {
                    console.log('EORI saved!');
                console.log('Response:' + response.data.type);
                if("E" == response.data.type){
                    alert(response.data.errorDescription);
                    } else {
                        alert("Saved!");
                    }
                })
                .catch(error => {
                console.log('EORI rejected!');
                console.log('error:' + error);
                });
            },
        },
    }
</script>

createEORI 是函数2

更新2

现在它可以工作了，但是来自字段的数据不会发送到服务器。这是页面中的所有字段，有些是日期选择器或普通的输入文本字段。在浏览器控制台中的更改显示此之前，如果我在第一个字段中写一个名称，它将显示在 c1_name 等中：

{"state":"1","c1_form":"","c1_identNumber":"","c1_name":"","c1_shortName":"","c1_8_street":"","c1_8_pk":"","c1_8_name":"","c1_8_city":"","c1_8_codeCountry":"","c1_identNumber1":"","c3_name":"","c3_nameShort":"","c3_city":"","c3_codeCountry":"","c3_street":"","c3_pk":"","c3_phone":"","codePerson":"","codeActivity":"","c1_date":"","c5_date":"","c7_date":"","dateFrom":"","dateTo":"","c8_date":"","c1_numberVAT":"","c8_provider":"","c8_number":"","codeMU":"","agreed1":"","agreed2":"","username":"testuser"}

但是，更改后发送的数据或至少看到的数据只是：

{"state":"1","username":"testuser"}

日志来自

console.log("updateEori state: " + JSON.stringify(eoriData));

来自 createEORI() 函数

标签： javascriptformsvalidationvue.js

javascript - 如果表单验证为假（VueJS），则防止将数据发送到数据库/服务器

问题描述

解决方案

推荐阅读