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" } ] } }
标签:name,校验,表单,callback,trigger,ui,blur,message,element
From: https://blog.51cto.com/u_10486491/8195034