elementui異步后台校驗表單，修改重復校驗

elementui簡單的form校驗這里就不介紹了，這里主要記錄下如何通過后台進行指定字段的異步后台校驗。

1.導入axios

<script src="https://unpkg.com/axios/dist/axios.min.js">

//為了保證引用速度，可以把axios的js文件copy到項目文件中

2.注意校驗方法的位置

var vue = new Vue({
        el: '.background',
        data () {
            var validatePhone = (rule, value, callback) => {
                var reg = /^1[0-9]{10}$/;
                if(!reg.test(value)){
                    callback(new Error("請輸入正確格式手機號"));
                    return;
                }
                var params = new URLSearchParams();//后台采用json傳參， //如果傳參出現問題可以參考這篇博客https://blog.csdn.net/wild46cat/article/details/78447467
                 params.append('phone',value);
                 params.append('id',vue.ruleForm.id);//主鍵id保證在修改數據時對當前不進行校驗，sql中排除當前id數據
                axios.post([[@{/employee/checkPhoneAndEmail}]], params, { emulateJSON: true })
                .then(function (response) {
                    if (response.data.code !=000) {
                        callback(new Error(response.data.msg));
                    } else {
                        callback()
                    }
                }).catch(function () {
                            callback(new Error('服務異常'))
                        })
            };
            let validateEmail = (rule, value, callback) => {
                var reg = /^1\d{5}$/;
                if(!reg.test(value)){
                    callback(new Error("請輸入以1開頭，長度為6位的數字"));
                    return;
                }
                var params = new URLSearchParams();
                params.append('email',value);
                    axios.post([[@{/employee/checkPhoneAndEmail}]], params, { emulateJSON: true })
                            .then(function (response) {
                                if (response.data.code !=000) {
                                    callback(new Error(response.data.msg));
                                } else {
                                    callback()
                                }
                            }).catch(function () {
                                callback(new Error('服務異常'))
                            })
            };
            return {
                employeeData:employeeData,
                emailSuffix:emailSuffix,
                ruleForm: {
                    phone: employeeData[0].phone,
                    email: formatEmail,
                   id:'',//數據主鍵
                },
                rules: {
                    phone: [
                        {required: true, trigger: 'blur'},
                    ],
                    email: [//自定義校驗規則validator:validateEmail
                {required: true, validator:validateEmail, trigger: 'blur'}, ], } } }, 
       methods: {
          back(){ window.open([[@{/employee/showHtml}]],"_self"); }, 
          input(){ this.emailDisabled=false; },
　　submit(formName){
    this.$refs[formName].validate((valid) => {
        if (valid) {
            var json = {
                'phone': this.ruleForm.phone,
                'email': this.ruleForm.email,
                'userId': this.employeeData[0].user_id,
                 //……提交方法略
            };
} ,