Question

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

<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()不得继续。

Update1：

<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是function2

Update2

现在它可以工作了，但是没有将字段中的数据发送到服务器。那就是页面上的所有字段，有些是日期选择器或普通的输入文本字段。在浏览器控制台中的更改显示之前，如果我在第一个字段中输入名称，它将显示在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（）函数

Answer 1

我认为最好只从HTML中调用一个函数。像这样：

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

submit(model) {
    if (this.validateForm(model) == true)
    {
        // submission process here (maybe call function2())
    }
}

validateForm(model) {
    if (this.model.codePerson == ''){
        document.getElementById('codePerson').style.borderColor = "red";
        this.errors.push("Choose a type!\n");
        this.handleFalseValidation();
        return false;
    }

    document.getElementById('codePerson').style.borderColor = "#CCCCCC";
    return true;
}

handleFalseValidation() {
    alert("Form validation:\n" + this.errors.join(""));
}

Answer 2

好，我解决了发送数据的问题。这都是我的错。

我将复制克里斯的答案。可行。

调用this.createEori(eoriData);时，eoriData未定义。它不存在。请改用this.createEori();，然后在createEori函数中删除参数，并将var eoriData = {};添加为第一行。（请注意，这是非常基本的javascript，函数和变量的工作方式，并且与Vue或服务器请求完全无关）

如果表单验证为假（VueJS），请阻止向数据库/服务器发送数据

2 个答案: