elementui表单校验规则

elementui表单校验规则
ElementUI表单校验规则
一、必填项 (required)
1.必须指定 required 属性。

比如：<el-input v-model="" required />
2.如果多个规则同时应用，请使用 triggers 属性定义要求验证的表单触
发事件。

默认为“blur,change”。

比如：<el-input v-model="" required triggers="change" />
二、字符串最大长度 (max-length)
1.必须指定 maxlength 属性，当超出最大长度限制时，返回一个自定义
的错误消息。

比如：<el-input v-model="" maxlength="20" />
2.建议在组件上直接写 maxlength 属性，若在 JS 环境中使用，可以使
用max 来指定最大长度，validator.max(6) 来检测最大长度是6 个字符。

三、最小长度 (min-length)
1.必须指定 minlength 属性，当小于最小长度限制时，返回一个自定义
的错误消息。

比如：<el-input v-model="" minlength="4" />
2.建议在组件上直接写 minlength 属性，若在 JS 环境中使用，可以使用min 来指定最小长度，validator.min(4) 来检测最小长度是 4 个字符。

四、字符串类型 (type)
1.必须指定 type 属性，来指定要验证的类型，支持 text、email、url、number、date、tel。

比如：<el-input v-model="" type="text" />
2. 可以使用 validator.string 来检测字符串类型，支持正则表达式。

五、正则表达式 (pattern)
1.必须指定 pattern 属性，根据正则表达式匹配字符串，可以使用"i"属性帮助正则表达式匹配不区分大小写。

比如：<el-input v-model="" pattern="/^[0-9]*$/" i />
2. 可以使用 validator.test 来检测字符串是否符合正则表达式的要求。

六、数字类型 (number)
1.必须指定 number 属性，来验证输入是否为有效的数字。

比如：<el-input v-model="" number />
2. 可以使用 validator.number 来检测字符串是否为有效的数字。

七、数据长度范围 (range)
1.必须指定 min 和 max 属性，来限制输入的最大最小值。

比如：<el-input v-model="" min="1" max="5" />
2. 可以使用 validator.between 来检测数据的范围。

八、日期类型 (date)
1.必须指定 date 属性，来验证输入是否为有效的日期。

比如：<el-input v-model="" date />
2. 可以使用 validator.date 来检测字符串是否为有效的日期格式。

九、邮箱类型 (email)
1.必须指定 email 属性，来验证输入是否为有效的邮箱格式。

比如：<el-input v-model="" email />
2. 可以使用 validator.email 来检测字符串是否为有效的邮箱格式。

十、手机号码类型 (telephone)
1.必须指定 telephone 属性，来验证输入是否为有效的手机号码格式。

比如：<el-input v-model="" telephone />
2. 可以使用 validator.telephone 来检测字符串是否为有效的手机号码格式。