ElementUI组件库中表单校验默认使用的是async-validator,所以要了解ElementUI表单验证的rules规则,先了解async-validator
规则参数
type
:验证数据类型
- 支持的类型如下,默认类型为string
string |
值必须是 String 类型,这是默认值 |
number |
值必须是 String 类型,包含整数和小数 |
integer |
值必须是 Number 和整数类型 |
float |
值必须是 Number 和浮点数类型,此时不能为整数,必须有小数点 |
boolean |
值必须是 Boolean 类型,true/false |
array |
值必须是由array.isarray确定的数组 |
object |
值必须是 Object 类型,而不是Array.IsArray类型,不能为数组 |
enum |
值必须存在于枚举中,需要搭配enum 参数指定枚举项 |
method |
值必须是 Function 类型 |
regexp |
必须是 RegExp(正则) 的实例或在创建新 RegExp 时不生成异常的字符串,可以通过new RegExp来创建 |
date |
值必须是 Date 类型,值必须可以转为有效日期值 |
url |
值必须是url类型,值必须符合url格式 |
email |
值必须是Email类型,值必须符合邮箱格式 |
hex |
值必须是16进制类型,如0xFFF |
any |
任意类型,不限制 |
- 使用方法
- 类型
url
和email
,是可以直接用于相关值的校验的,比如:
- 类型
emailNum:{type: 'email', message:'请输入正确的邮箱格式', trigger: 'blur'}
- 类型`number`、`integer`、`float`以及`boolean`类型,由于控件`input`输入的都是字符串,因此必须进行类型转换,否则验证不通过,可以搭配`transform`来使用。类型`number`,可以通过数据绑定时指定`v-mode`的修饰符`v-mode.number`来进行转换。
trigger
:表单验证触发方式
- String
- 使用方法
- 没有进行任何输入时,不会触发change,但一定会触发blur事件
blur | 在 Input 失去焦点时触发 |
change | 仅在输入框失去焦点或用户按下回车时触发 |
email:{type: 'email', message:'请输入正确的邮箱格式', trigger: 'blur'}
required
:该项是否是必填项
- Boolean
email:{type: 'email', required: true, message:'请输入正确的邮箱格式', trigger: 'blur'}
message
:验证不通过时显示的信息
- 多种类型,一般为String,
// String, 直接赋值
{required: true, message: '用户名必填'}
// 或引入i18n国际化处理
{message: this.$t('username')}
// JSX
{message: <br>请输入名称</br}>}
// 函数
{message: ()=> this.nameMessageHandle(messageId, paramValues)}
pattern
:正则表达式
- regexp/string
- 字段值匹配正则表达式才能通过验证
email:{type: 'string', required: true, pattern:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message:'请输入正确的邮箱格式', trigger: 'blur'}
min
和max
:最小/大 值/长度
- number
- 对于字符串和数组类型,将根据长度进行比较,不小于min且不得大于max;对于数字类型,数字不小于min且不得大于max
age: { type: 'integer', min: 18, max: 60 }
len
:长度
- number
- 字符串和数组类型,要求 长度length等于len;对于数字类型,要求值等于len;len属性与min和max属性组合,则len优先
userName: { type: 'string', len: 6},
enum
:枚举
- array
- type必须设置为enum,该项只能在枚举出的集合里
role: { type: "enum", enum: ['admin', 'user', 'guest'] }
whitespace
:是否将空白(空格)视为错误
- boolean
- type必须设置为string,是否将空白(空格)视为错误,为true时表示空白(空格)时验证不通过。
// 在userName和pass都只包含空格的情况下userName可以通过验证,pass不能通过验证
userName: { type: 'string', required: true},
pass: { type: 'string', required: true, whitespace: true }
transform
:在验证之前转换值
- function
- 钩子函数,表示在开始验证前对数据进行处理,然后再进行验证
userName: {type: 'string', required: true, transform (value) {return value.trim()}}
defaultField
:验证数组或对象中包含的所有值
- array/object
- type为数组或对象类型时一起使用,用来验证数组或对象中包含的所有值,进行深层验证
urls: {type: "array", required: true, defaultField: {type: "url"}}
fields
:分别验证数据中的值
- object
- type为数组或对象类型时一起使用,分别验证array/object类型的数据中的值,实现深层验证
demo: {type: "array", required: true, len: 3,
fields: {
0: {type: "string", required: true},
1: {type: "number", required: true},
2: {type: "url", required: true}
}
}
validator
:自定义验证函数
- function
- 验证器,可以为指定字段自定义验证函数:function(rule, value, callback, source, options)
- rule:指向规则的对象,其中的 field 属性是当前正在校验字段的名称
- value:当前校验字段的值
- callback:校验结束的回调函数,不管判定成功或者失败,必须调用,校验通过则不带参数,直接调用callback(),如果校验不通过,则带一个Error错误参数,如callback(new Error(‘具体的错误提示信息’)),关于Error的用法,参考这里
- source:调用校验的属性对象,不常用
- options: 附加参数,不常用
username:{required: true, type: "string", validator (rule, value, callback) {
if (value?.trim()) {
callback();
} else {
callback(new Error('控件下方红色小字提示信息'));
}
}
},
asyncValidator
:自定义异步验证函数
- function
- 异步验证器,可以为指定字段自定义异步验证函数 function(rule, value, callback)
// 如验证用户名是否存在
userName: {
asyncValidator (rule, value, callback) {
axios({
url: '/users',
params: { userName: value }
}).then((data) => {
callback()
}, (error) => {
callback(new Error(error))
})
}
}
自定义验证函数的进阶使用
可以创建携带参数的校验函数
age: {validator: validatorRange(1,100), trigger: 'blur'}
validatorRange: (min, max) => (rule, value, callback) =>{
if(value >= min && value <= max) return callback();
else return callback(new Error(`请输入${min}到${max}的数字`))
}
或者在校验时需要传入data中的数据
<template>
...
<el-form-item label="执行时间" prop="execTime" :rules="[{...rules.execTime, inKey: this.formData}]">
...
</el-form-item>
...
</template>
<script>
const check = (rule, value, callback) => {
console.log(rule.inKey)
}
export default {
data() {
return {
formData:{...}
rules:{
execTime: {required: true, message: '请输入正确的执行时间', validator: check },
}
}
}
...
}
</script>
Deep rules 深层规则
对于对象object或数组array的校验,如果需要深入具体到每一个元素或成员,就需要用到Deep rules。
Deep rules 需要涉及fields和defaultField两个属性
对象的深层校验示例:
{
address: {
type: 'object',
required: true,
fields: {
street: [{type: 'string', required: true}],
city: [{type: 'string', required: true}],
zip: [{ type: 'string', required: true, len: 8, message: 'invalid zip' }],
},
...
},
...
}
数组的深层校验示例:
{
roles: [{
type: 'array',
required: true,
len: 3,
fields: {
0: [{ type: 'string', required: true }],
1: [{ type: 'string', required: true }],
2: [{ type: 'string', required: true }],
},
}],
}
数组的深层校验fields看起来都是重复的,如果每个成员都是相同的校验规则,那么就使用defaultField属性。
{
urls: [{
type: 'array',
required: true,
defaultField: { type: 'url' },
}],
}
数组和对象可以继续嵌套数组和对象。
{
persons: [{
type: 'array',
required: true,
defaultField:{
type: 'object',
required: true,
fields: {
address: [{
type: 'object',
required: true,
fields: {
street: [{ type: 'string', required: true }],
city: [{ type: 'string', required: true }],
zip: [{ type: 'string', required: true, len: 8, message: 'invalid zip' }],
},
}],
name: [{ type: 'string', required: true }],
}
}
}],
}
rules的结果
假设将表单的ref
设定为info
,代码示例:
<el-form :mode="infoForm" :rules="infoRules" ref="info">
...
</el-form>
这样就可以通过this.$refs.info
拿到表单的实例,然后通过表单的4个方法对表单的验证进行相应操作
validate
通过validate
方法对校验整个表单
this.$refs.info.validate((valid) => {
if(valid){
...//都验证通过后执行操作
}else{
...//验证不通过后执行操作
}
})
validateField
通过validateField
方法校验表单的某个字段
this.$refs.info.validateField('name', error => {
if(!error){
...//验证通过后执行操作
} else {
...//验证失败后执行操作
}
})
排坑
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
element ui – 表单验证 this.$refs[formName].validate()里面的内容不执行
ElementUI 自定义验证 validate 函数不会执行
感谢
ElementUI学习之-rules详解文章来源:https://www.toymoban.com/news/detail-498360.html
async-validator详细用法文章来源地址https://www.toymoban.com/news/detail-498360.html
到了这里,关于ElementUI 表单 rules 规则的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!