ElementUI学习之rules详解

目录

• 前言
• rules的使用
  • 表单统一验证
  • 表单项单独验证
  • 示例
• rules的参数
  • required
  • type
  • message
  • min和max
  • len
  • trigger
  • pattern
  • whitespace
  • enum
  • transform
  • validator
    • 进阶用法
• Deep rules 深层规则
• rules的结果
  • validate
  • validateField

前言

ElementUI组件库中表单校验默认使用的是async-validator，所以要了解ElementUI表单验证的rules规则，先了解async-validator。

rules的使用

表单统一验证

<el-form :rules="rulesForm">
	<el-form-item prop="ruleName">
	</el-form-item>
</el-form>

上述代码表示表单统一使用rulesForm（也可以使用其他名称）来进行验证，然后每个需要验证的表单项通过prop指定验证的字段名。

表单项单独验证

<el-form>
	<el-form-item :rules="rulesItem1">
	</el-form-item>
</el-form>

上述代码表示表单项使用rulesItem1（也可以使用其他名称）来进行验证。
PS：可以在data中定义，也可以直接将规则写在属性上。

示例

data: {
	rulesForm: {
		ruleName: [
			{required: true, message: '请输入名称', trigger: 'change'},
			{min: 3, max: 10, message: '名称长度在3到10个字符', trigger: 'blur'},
			...
		],
		...
	}
	rulesItem1: [
		{required: true, message: '请输入名称', trigger: 'change'}
		{min: 3, max: 10, message: '名称长度在3到10个字符', trigger: 'blur'}
	]
}

注意：

1. 表单统一验证rulesForm是一个对象。
2. 表单项单独rolesItem1可以是一个对象，也可以是一个验证集合。

rules的参数

参考链接
https://www.cnblogs.com/wozho/p/10955525.html
https://www.cnblogs.com/alabo1999/p/14990310.html

required

Boolean，表示该项是否是必填项，为true时表示必填。
示例：
{required: true, message: '请输入必填项', trigger: 'blur'}

type

String，表示该项的数据类型，不符合类型要求，则验证不通过，显示错误信息。
支持的类型如下：

• string: String类型，这是默认值。
• number: Number类型，包含整数和小数。
• integer： 整数。
• float：小数，此时不能为整数，必须有小数点。
• boolean：Boolean类型，true/false。
• array：Array类型。
• object：Object类型，不能为数组。
• enum：Enum类型，需要搭配enum参数指定枚举项。
• method：function类型。
• regexp：正则类型，值必须是一个合法的正则表达式，可以通过new RegExp来创建。
• date：Date类型，值必须可以转为有效日期值。
• url：Url类型，值必须符合url格式。
• email：Email类型，值必须符合邮箱格式。
• hex：16进制类型，如0xFFF
• any：任意类型，不限制。

类型url和email，是可以直接用于相关值的校验的，比如：

{type: 'email', message:'请输入正确的邮箱格式', trigger: 'blur'}

类型number,integer,float以及boolean类型，由于控件input输入的都是字符串，因此必须进行类型转换，否则验证不通过，可以搭配transform来使用。
类型number，可以通过数据绑定时指定v-mode的修饰符v-mode.number来进行转换。

message

多种类型，一般为String，标识该项在验证不通过时显示的信息。

• 直接赋值

{message: '请输入名称'}

或引入i18n国际化处理

{message: this.$t('nameRequried')}

• JSX

{message: <br>请输入名称</br}>}

• 函数

{message: ()=> this.nameMessageHandle(messageId, paramValues)}

min和max

Number，表示该项的数据范围，如果类型是string或array，则表示长度值（value.length）的范围，如果类型是数值类型（number,integer,float）则表示值的范围。
示例：

{min: 3, max: 10, message: '名称长度在3到10个字符', trigger: 'blur'}

len

Number，表示该项的长度，如果类型是string或array，则表示长度值（value.length）的值必须等于len设置的值，如果类型是数值类型（number,integer,float）则表示该项的值必须等于len设置的值。
len的优先级高于min和max。
示例：

{len: 6, message: '长度为6, trigger: 'blur'}

trigger

取值为blur/change，blur表示失去焦点时才触发验证，change表示值改变时就触发。

pattern

正则表达式，表示该项必须匹配正则表达式才能通过验证。
示例：

{pattern: /^\d*$/, message: '只能输入数字', trigger: 'blur'}

whitespace

Boolean，表示该项是否将空白(空格)视为错误，为true时表示空白（空格）时验证不通过。
示例：

{whitespace: true, message: '只存在空格', trigger: 'blur'}

enum

Array，表示该项只能在枚举出的集合里。
示例：

{type: "enum", enum: ['admin', 'user', 'guest'], message: '结果不存在', trigger: 'blur'}

transform

Function，钩子函数，表示在开始验证前对数据进行处理，然后再进行验证。
示例：

{type: 'string', required: true, message: '请输入必填项', transform(value){
	return value.trim();
}}

当然这里只是示例transform的用法，实际开发中要达到上述代码效果，可以通过v-mode.trim的方式。

validator

Function，自定义校验函数，表示使用指定方法进行规则校验。
函数格式：function(rule, value, callback, source, options)
参数含义如下：

• rule：指向规则的对象，其中的 field 属性是当前正在校验字段的名称。
• value：当前校验字段的值。
• callback: 校验结束的回调函数，校验通过则不带参数，直接调用callback()，如果校验不通过，则带一个Error错误参数，如callback(new Error('具体的错误提示信息'))，关于Error的用法，参考这里
• source：调用校验的属性对象，不常用。
• options: 附加参数，不常用。
  示例：

validatorTrim: (rule, value, callback)=>{
	if (value?.trim()) {
		callback();
	} else {
		callback(new Error('不能为空或空白'));
	}
}

当然这里只是示例validator的用法，实际开发中要达到上述代码效果，可以使用whitespace规则。

进阶用法

可以创建携带参数的校验函数，如：

validatorRange: (min, max) => (rule, value, callback) =>{
	if(value >= min && value <= max) return callback();
	else return callback(new Error(`请输入${min}到${max}的数字`))
}

使用时：

age: [
	{validator: validatorRange(1,100), trigger: 'blur'}
]

当然这里只是示例带参数的validator的用法，实际开发中要达到上述代码效果，可以使用min和max规则。

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){
    ...//都验证通过后执行操作
  }
})

validateField

通过validateField方法校验表单的某个字段。
示例：

this.$refs.info.validateField('name', error => {
  if(!error){
    ...//验证通过后执行操作
  } else {
    ...//验证失败后执行操作
  }
})