element-ui 表单验证注意事项

1、表单验证注意

其中的每个 el-form-item 标签中，都有一个 prop ，其中的值是我们 rules 对象中的 某个 属性。

然后我们 v-model 绑定的值也必须是 这个 属性

比如我们的字段是 userName，我们的prop还是name时，校验失效

<el-form-item label="名称" prop="name"> <el-input v-model="form.userName"></el-input> </el-form-item>

form: { name: undefined, sex: undefined, age: undefined }, rules: { name: [ { required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' } ], sex: [ { required: true, message: "性别不能为空", trigger: "blur" } ], age: [ { required: true, message: "年龄不能为空", trigger: "blur" }, { pattern: /^([0-9]|[1-9]\d|[1-9]\d\d)$/, message: '年龄介于 0-999 之间', trigger: 'blur' } ] }

2、触发校验错误

rules 中 每个校验对象 都有一项 trigger 是检验触发的方式

对  el-input   输入框的验证， trigger 的值选 blur ，即 失去焦点 时进行验证。

下拉框  el-select 、日期选择器  el-date-picker 、复选框  el-checkbox 、单选框  el-radio 验证时， trigger 的值选择 change ，即当 值发生变化 时就进行验证。

没有任何输入的时候，不会触发 change ， 但一定会触发 blur 事件

注：如果使用了其他的组件（非ele组件等），组件中没有 v-model 等等情况时，值改变时需要我们手动去触发校验

方法名 说明 参数 validateField 对部分表单字段进行校验的方法 Function(props: array | string, callback: Function(errorMessage: string))

this.$refs.表单ref名称.validateField(校验字段);

自定义校验：

用于一些校验一些复杂的值

validator的参数有：(rule, value, callback)， 前三个比较重要 。

rule： 指向该条规则对象。 value： 新的值，用于参与运算、对比。 callback： 执行回调，使用方法是：callback('...');。 如果不传参：表示验证通过，一般不必专门强调。 如果传入值：字符串会作为错误提示，但是显示优先级低于外层的message。比如callback('内层错误提示');跟message: '外层错误提示'同时存在，则会提示：外层错误提示

data(){ const name = (rule, value, callback) => { console.log(rule) console.log(value) console.log(callback) if (this.oldName === value) { callback(new Error("新名字不能和旧名字一致")); } else { callback(); } }; return { rules: { name: [ { required: true, trigger: "blur", message: "请再次输入新名字" }, { required: true, validator: name, trigger: "blur" } ] } }