element-ui表单校验

默认表单校验

在最外层 <el-form> 处绑定rules和ref

<el-form style="width:80%" :model="tmForm" :rules="rules" ref="ruleForm">

在 <el-form-item> 处绑定prop，表示表单验证绑定的数据名称，如果没有绑定prop则表单验证不会生效。

<el-form-item label="品牌名称" label-width="100px" prop="tmName">
    <el-input v-model="tmForm.tmName"></el-input>
</el-form-item>

 在data中规定rules

rules: {
    tmName: [{ required: true, message: '请输入品牌名称', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'change' }],
    logoUrl: [{ required: true, message: '请选择品牌logo' }],
    }

在点击事件中进行表单验证：

this.$refs.ruleForm.validate((valid) => {
    if ( valid) {
        // 如果表单验证成功
    }
    // 表单验证失败
    else {
        console.log('error submit!!');
        return false;
    }
})

自定义表单校验

自定义表单校验只有rules有所不同

自定义表单校验：

data() {
    // 表单校验写在return前面
    var validateTmName = (rules, value, callback) => {
        if(value.length < 2 || value.length > 10){
          callback(new Error('品牌名称在2-10个字之间'))
        }else{
          callback();
        }
    };
    return{}
}

在data中规定rules

rules: {
          tmName: [
            { required: true, message: '请输入品牌名称', trigger: 'blur' },
            { validator: validateTmName, trigger: 'change' }
          ],
          logoUrl: [
            { required: true, message: '请选择品牌logo' }
          ],
      }