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

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详细用法

ElementUI ===＞表单 rules 规则相关推荐

Element-UI 表单验证规则rules 配置参数说明
官方文档 : https://github.com/yiminghe/async-validator 转载于:https://www.cnblogs.com/itstac/p/11063125.htm ...
vue 表单验证正则_vue elementUI如何自定义表单验证规则
一.elementUI自带了一部分表单验证规则,本文讲解如何使用自定义验证规则来完成密码的二次验证. 1.1.首先添加验证邮箱和电话规则和正则表达式// 验证邮箱的规则 var checkEmail ...
Element Ui使用技巧——Form表单的校验规则rules详细说明；element的 form 表单rules详细用法
本文章是在项目开发时遇到问题看到的一片好文, 摘录自[博客园]–[逍遥云天]. 感谢作者地址 – https://www.cnblogs.com/xyyt/p/13366812.html 在 [逍遥 ...
element-ui表单_每日UI挑战强加-登录表单（分步教程）
element-ui表单 A step by step journey to create a good design from the daily UI challenge 一步步走,从日常的UI挑 ...
工作188：表单校验规则
1绑定rules <el-dialog title="新建账号" :visible.sync="dialogFormVisible" @close=&qu ...
elementUI表单验证
elementUI表单验证注意: el-form中要有::model=" " :rules=" " el-form-item要有:prop 如果点击提交时也启 ...
php验证规则表单,PHP Yii框架之表单验证规则大全
Yii是一个基于组件的高性能PHP框架,用于开发大型Web应用.Yii采用严格的OOP编写,并有着完善的库引用以及全面的教程. 废话不多说了,直接给大家贴代码了. class ContactForm ...
elementui 嵌套表单验证_vue elementUI 表单嵌套验证的实例代码
一:表单一级验证 element中from组件内表单验证通过使用el-form标签,绑定model和rules属性进行表单验证简单的表单验证很简单,在prop内绑定验证属性,然后在rules对象内定 ...
element-ui表单验证
情景我想利用饿了么框架实现表单验证 http://element-cn.eleme.io/#/zh-CN/component/form#form-biao-dan 但是我的form里面的model和 ...
PHP Yii框架之表单验证规则大全
Yii是一个基于组件的高性能PHP框架,用于开发大型Web应用.Yii采用严格的OOP编写,并有着完善的库引用以及全面的教程,本文给大家介绍php yii框架之表单验证规则大全,感兴趣的朋友一起学习吧 ...

ElementUI ===＞表单 rules 规则

规则参数

`type`：验证数据类型

`trigger`：表单验证触发方式

`required`：该项是否是必填项

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

`pattern`：正则表达式

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

`len`：长度

`enum`：枚举

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

`transform`：在验证之前转换值

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

`fields`：分别验证数据中的值

`validator`：自定义验证函数

`asyncValidator`：自定义异步验证函数

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

Deep rules 深层规则

rules的结果

validate

validateField

排坑

感谢

ElementUI ===＞表单 rules 规则相关推荐

最新文章

热门文章

ElementUI ===＞ 表单 rules 规则

规则参数

type：验证数据类型

trigger：表单验证触发方式

required：该项是否是必填项

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

pattern：正则表达式

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

len：长度

enum：枚举

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

transform：在验证之前转换值

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

fields：分别验证数据中的值

validator：自定义验证函数

asyncValidator：自定义异步验证函数

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

Deep rules 深层规则

rules的结果

validate

validateField

排坑

感谢

ElementUI ===＞ 表单 rules 规则相关推荐

最新文章

热门文章

ElementUI ===＞表单 rules 规则

`type`：验证数据类型

`trigger`：表单验证触发方式

`required`：该项是否是必填项

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

`pattern`：正则表达式

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

`len`：长度

`enum`：枚举

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

`transform`：在验证之前转换值

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

`fields`：分别验证数据中的值

`validator`：自定义验证函数

`asyncValidator`：自定义异步验证函数

ElementUI ===＞表单 rules 规则相关推荐