ElementUI 表单 rules 规则

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

规则参数

type：验证数据类型

• 支持的类型如下，默认类型为string

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

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

1
2

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

trigger：表单验证触发方式

• String
• 使用方法
• 没有进行任何输入时，不会触发change，但一定会触发blur事件

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

required：该项是否是必填项

• Boolean

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

message：验证不通过时显示的信息

• 多种类型，一般为String，

// String, 直接赋值
{required: true, message: '用户名必填'}
// 或引入i18n国际化处理
{message: this.$t('username')}
// JSX
{message: <br>请输入名称</br}>}
// 函数
{message: ()=> this.nameMessageHandle(messageId, paramValues)}
1
2
3
4
5
6
7
8

pattern：正则表达式

• regexp/string
• 字段值匹配正则表达式才能通过验证

email:{type: 'string', required: true, pattern:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message:'请输入正确的邮箱格式', trigger: 'blur'}
1

min和max：最小/大 值/长度

• number
• 对于字符串和数组类型，将根据长度进行比较，不小于min且不得大于max；对于数字类型，数字不小于min且不得大于max

age: { type: 'integer', min: 18, max: 60 }
1

len：长度

• number
• 字符串和数组类型，要求 长度length等于len；对于数字类型，要求值等于len；len属性与min和max属性组合，则len优先

userName: { type: 'string', len: 6},
1

enum：枚举

• array
• type必须设置为enum，该项只能在枚举出的集合里

role: { type: "enum", enum: ['admin', 'user', 'guest'] }
1

whitespace：是否将空白(空格)视为错误

• boolean
• type必须设置为string，是否将空白(空格)视为错误，为true时表示空白（空格）时验证不通过。

// 在userName和pass都只包含空格的情况下userName可以通过验证，pass不能通过验证
userName: { type: 'string', required: true},
pass: { type: 'string', required: true, whitespace: true }
1
2
3

transform：在验证之前转换值

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

userName: {type: 'string', required: true, transform (value) {return value.trim()}}
1

defaultField：验证数组或对象中包含的所有值

• array/object
• type为数组或对象类型时一起使用，用来验证数组或对象中包含的所有值，进行深层验证

urls: {type: "array", required: true, defaultField: {type: "url"}}
1

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}
   }
  }
1
2
3
4
5
6
7

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('控件下方红色小字提示信息'));
    }
  }
},
1
2
3
4
5
6
7
8

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))
       })
     }
   }
1
2
3
4
5
6
7
8
9
10
11
12
13

自定义验证函数的进阶使用

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

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

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

或者在校验时需要传入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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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' }],
    },
    ...
  },
  ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13

数组的深层校验示例：

{
  roles: [{
    type: 'array',
    required: true,
    len: 3,
    fields: {
      0: [{ type: 'string', required: true }],
      1: [{ type: 'string', required: true }],
      2: [{ type: 'string', required: true }],
    },
  }],
}
1
2
3
4
5
6
7
8
9
10
11
12

数组的深层校验fields看起来都是重复的，如果每个成员都是相同的校验规则，那么就使用defaultField属性。

{
  urls: [{
    type: 'array',
    required: true,
    defaultField: { type: 'url' },
  }],
}
1
2
3
4
5
6
7

数组和对象可以继续嵌套数组和对象。

{
  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 }],
      }
    }
  }],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

rules的结果

假设将表单的ref设定为info，代码示例：

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

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

validate

通过validate方法对校验整个表单

this.$refs.info.validate((valid) => {
  if(valid){
    ...//都验证通过后执行操作
  }else{
    ...//验证不通过后执行操作
  }
})
1
2
3
4
5
6
7

validateField

通过validateField方法校验表单的某个字段

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

排坑

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

element ui – 表单验证 this.$refs[formName].validate()里面的内容不执行

ElementUI 自定义验证 validate 函数不会执行

感谢

ElementUI学习之-rules详解

async-validator详细用法