element-ui表单自定义校验

1.问题描述
项目开发过程中，遇到表单校验，这次的校验规则比较严，element-ui表单自带的校验完全解决不了问题。

2.解决方法
使用elementui表单校验中的自定义校验，validUsername是自定义的校验方法名称

2.1 定义表单校验：

rules:{userTypeId:[{required:true,message:'请选择类型',trigger:'change'}],username:[{required:true,validator: validUsername,trigger:'blur'}]}

2.2 自定义校验方法：
注意：方法中一定义要返回callback()，不然表单校验时是不会成功的

exportdefault{name:'Registry',data(){// js部分constvalidUsername=(rule, value, callback)=>{const reg =/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,18}$/if(value ===''){callback(newError('请输入用户名'))}elseif(!reg.test(value)){callback(newError('用户名必须是由6-18位英文(含大小写)+数字组成'))}else{callback()}}

3.表单校验

this.$refs.ruleForm.validate((valid)=>{if(valid){
console.log('表单校验成功')}})

4.清除表单校验结果
取消按钮可能使用到

this.$refs.pwdChangeForm.clearValidate()