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。

<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

   可以是一个对象，也可以是一个验证集合。

参考链接

javascript:void(0)

Boolean，表示该项是否是必填项，为true时表示必填。

示例：

{required: true, message: '请输入必填项', trigger: 'blur'}

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

来进行转换。

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

• 直接赋值

{message: '请输入名称'}
           

或引入i18n国际化处理

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

• JSX

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

• 函数

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

Number，表示该项的数据范围，如果类型是

string

或

array

，则表示长度值（

value.length

）的范围，如果类型是数值类型（

number

integer

float

）则表示值的范围。

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

Number，表示该项的长度，如果类型是

string

array

value.length

）的值必须等于len设置的值，如果类型是数值类型（

number

integer

float

）则表示该项的值必须等于len设置的值。

len

的优先级高于

min

max

。

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

取值为

blur/change

，

blur

表示失去焦点时才触发验证，

change

表示值改变时就触发。

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

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

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

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

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

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

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

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

当然这里只是示例

transform

的用法，实际开发中要达到上述代码效果，可以通过

v-mode.trim

的方式。

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

对于对象

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 }],
        }
    }
  }],
}
           

假设将表单的

ref

设定为

info

，代码示例：

<el-form :mode="infoForm" :rules="infoRules" ref="info">
...
</el-form>
           

这样就可以通过

this.$refs.info

拿到表单的实例，然后通过表单的4个方法对表单的验证进行相应操作。

this.$refs.info.validate((valid) => {
  if(valid){
    ...//都验证通过后执行操作
  }
})
           

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