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,
                 //……提交方法略
            };
} ,