element-ui表单动态验证

2019-04-26  本文已影响0人  陈大事_code

场景:大部分情况下,我们对于表单的验证,都是基本是否必填,即:required: true。但是,存在一些情况我们需要进行动态验证,

比如:

  1. 正则动态验证
  2. 自定义方法验证

一、动态正则验证

var rules = {
    phone: [
       { pattern: /^1[3-9](\d{9})$/, message: '请输入正确的手机号', trigger: ['change']},
       { max: 11, message: '请输入11位手机号', trigger: 'change' }
    ]
}

如上,可以使用pattern指定模式,即正则验证;可以使用max来指定最大长度;

二、自定义方法验证

var ruels = {
    [{validator: validateEmpty, trigger: 'blur'}]
}

// 用校验非空方法举例,具体根据实际情况验证
var validateEmpty = (rule, value, callback) => {
       if (value === '') {
         callback(new Error('请再次输入密码'));
       }else {
        callback();
      }
    }

如上,提供validator提供自定义验证选项,并提供回调。

上一篇下一篇

猜你喜欢

热点阅读