rules表单校验常用属性

表单校验规则

第三方校验规则参见 async-validator
点击跳转

几个基本使用的规则

规则 说明
required 如果为true,表示该字段为必填
message 当不满足设置的规则时的提示信息
pattern 正则表达式,通过正则验证值
min 当值为字符串时,min表示字符串的最小长度,当值为数字时,min表示数字的最小值
max 当值为字符串时,max表示字符串的最大长度,当值为数字时,max表示数字的最大值
trigger 校验的触发方式,change(值改变) / blur (失去焦点)两种,
validator 如果配置型的校验规则不满足你的需求,你可以通过自定义函数来完成校验

自定义校验规则

validator是一个函数, 其中有三个参数 (rule(当前规则),value(当前值),callback(回调函数))

// 自定义校验函数
    const checkMobile = function (rule, value, callback) {
      value.charAt(2) === '9' ? callback() : callback(new Error('第三位手机号必须是9'))
    }

 mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }, {
            trigger: 'blur',
            validator: checkMobile
   }],

猜你喜欢

转载自blog.csdn.net/weixin_55333190/article/details/120104027
今日推荐