ElementUI学习之-rules详解

[toc]

前言

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

rules的使用

表单统一验证


    
    

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

表单项单独验证


    
    

上述代码表示表单项使用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:任意类型,不限制。

类型urlemail,是可以直接用于相关值的校验的,比如:

{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: 
请输入名称}
  • 函数
{message: ()=> this.nameMessageHandle(messageId, paramValues)}

min和max

Number,表示该项的数据范围,如果类型是stringarray,则表示长度值(value.length)的范围,如果类型是数值类型(number,integer,float)则表示值的范围。
示例:

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

len

Number,表示该项的长度,如果类型是stringarray,则表示长度值(value.length)的值必须等于len设置的值,如果类型是数值类型(number,integer,float)则表示该项的值必须等于len设置的值。
len的优先级高于minmax
示例:

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

trigger

取值为blur/changeblur表示失去焦点时才触发验证,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的用法,实际开发中要达到上述代码效果,可以使用minmax规则。

Deep rules 深层规则

对于对象object或数组array的校验,如果需要深入具体到每一个元素或成员,就需要用到Deep rules
Deep rules 需要涉及fieldsdefaultField两个属性
对象的深层校验示例:

{
  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,代码示例:


...

这样就可以通过this.$refs.info拿到表单的实例,然后通过表单的4个方法对表单的验证进行相应操作。

image

validate

通过validate方法对校验整个表单。
示例:

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

validateField

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

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

你可能感兴趣的:(ElementUI学习之-rules详解)