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个方法对表单的验证进行相应操作

element的表单校验validator方法写在methods里不生效 elementui表单校验规则_前端

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详解

async-validator详细用法