element-ui中el-form自定义验证（调用后端接口）

需求

在输入项目名称后，调用后端接口isNameOnly，若已存在，则效果如下图：

1. 先设置校验规则rules

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" 
class="demo-ruleForm">

2. 在return中定义

// 判定规则
                rules: {
                    taskName: [{
                            required: true,
                            message: '请输入项目名称',
                            trigger: 'blur'
                        },
                        {
                            min: 3,
                            max: 15,
                            message: '长度在 3 到 15 个字符',
                            trigger: 'blur'
                        },
                        {
                            required: true,
                            trigger: 'blur',
                            //validatePass --- 我们自定义的校验规则
                            validator: validatePass  
                        }
                    ],
                },

3. 在data中添加如下代码：（注意，以下代码和return同级）

const validatePass = (rule, value, callback) => {
                this.$depot.get({
                    url: '/isNameOnly',
                    config: {
                        params: {
                            taskName: 1,
                            userId: 1)
                        }
                    },
                    cb: (res) => {
                        this.nameOK = res.data == 1 ? true : false	
                    }
                })
                if (this.nameOK != false) {
                    callback()
                } else {
                    callback(new Error('经验证，该项目已存在于数据库中'))
                }
            }

4. method定义提交表单方法

// 提交表单数据
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$message({
                            message: '恭喜你！项目创建成功！',
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: '请按照提示正确输入信息后再创建！',
                            center: true
                        });
                    }
                });

            },