element-ui表单校验

默认表单校验

在最外层 处绑定rules和ref

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

 在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' }
          ],
      }