element-ui表单自定义校验

Posted 2022-10-31 郑石秀

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()，不然表单校验时是不会成功的

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

3.表单校验

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

)

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

this.$refs.pwdChangeForm.clearValidate()