element - ui 表单验证 rules 配置

掌握以下几点，让你的表单校验不在困难

本文参考详解element-ui 表单校验 Rules 配置 常用黑科技

一，type

type：输入类型，string
type可选属性：number,boolean,string,integer,float,array,enum,url,email,method,regexp,object,date,hex,any......
boolean：输入值为boolean
...
integer:整数   （输入值非数字无效）
float：浮点数
array：数组
enum：枚举 （{type: 'enum', enum: ['aaa', 'bbb'], message: `不存在enum中`, trigger: 'change'}）
...
any：任意值

二，required

required：是否必填，boolean
true:该表单为必填项
false:不必填项

三，Pattern

pattern：正则校验，正则表达式
//moneyNum:[{pattern: /^[0-9]*$/, message: `请输入数字`, trigger: 'blur'}]

四，min、max

min、max：最小，最大多少位，number
//minmax: [{min: 3, max: 8, message: '请输入3-8位', trigger: 'blur'}]

五，len

len：输入位数，number
//length: [ {len: 5, message: '请输入5位', trigger: 'blur'}]

六，whitespace

whitespace：验证是否只有空格，boolean
//whitespace: [{whitespace: true, message: '只存在空格', trigger: 'blur'}]

七，Messages

Messages：校验不通过提示，string

八，validator

validator：指定字段自定义验证功能，function
let numberLengthSix = (rule, value, callback) => {
 if(String(value).length > 6) {
 callback('超出限制')
 } else {
 callback()
 }
}
...//
//numberLengthSix: [{validator: numberLengthSix, trigger: 'blur'}]

九，trigger

trigger：触发事件，string
blur：失去焦点触发
change：发生改变触发