vue 自定义规则校验 element设置正则表达式

Posted 2023-04-24

参考技术A 表单验证时，设置密码，和重新输入密码  判断在两个密码是否相等

 data() 

    // 自检测

     const showPwa = (ru, value, cb) => 

      if (value !== this.regForm.password) 

        cb(new Error('密码不一致，请重新输入'))

       else 

        cb()

      

    

    return 

      regForm: 

        username: '',

        repassword: '',

        password: ''

      ,

      regFormRules: 

         //表单验证

        username: [

           required: true, message: '用户名不能为空', trigger: 'blur' ,

//设置正则表达式 pattern

           pattern: /^[a-zA-Z0-9]1,10$/, message: '字母数字、长度 1-10', trigger: 'blur' 

        ],

        repassword: [

           required: true, message: '密码不能为空', trigger: 'blur' ,

           pattern: /^\S6,15$/, message: '非空字符串、长度 6-15', trigger: 'blur' ,

           validator: showPwa, trigger: 'blur' 

        ],

        password: [

           required: true, message: '密码不能为空', trigger: 'blur' ,

           pattern: /^\S6,15$/, message: '非空字符串、长度 6-15', trigger: 'blur' 

        ]

      

    

  ,

el-form的各种校验姿态

参考技术A 在el-form上绑定rules，rlues为校验规则，在el-form-item上绑定对应的prop。
自定义规则，validator：checkAge，自定义规则的函数。
不啰嗦，详细的可查看element文档 http://element-cn.eleme.io/#/zh-CN/component/form 。

可将rule写在各自的el-form-item上

4.行间循环自定义校验