ElementUI中el-form组件的rules参数举例详解
作者：JAVA海洋里的小鱼
在检验规则的代码中，我们可以看到规则对象中包含required/message/trigger/min/max等参数，这些参数配合起来，可以完成我们以往要编写多行代码才能实现的校验功能。
下面就详细介绍
参数说明
属性 | 类型 | 说明 |
type | String | 用于验证数据类型，默认类型为’string’ |
required | boolean | 是否必填 |
pattern | regexp/string | 字段值匹配正则表达式才能通过验证 |
min和max | number | 对于字符串和数组类型，将根据长度进行比较，对于数字类型，数字不得小于min，也不得大于max |
len | number | 对于字符串和数组类型，对length属性执行比较，对于数字类型，此属性指示数字的完全匹配，len属性与min和max属性组合，则len优先。 |
enum | array | type必须设置为enum，值必须包含在从可能值列表中才能通过验证 |
trigger | blur/change | 触发验证的时机，blur失去焦点时触发，change:值发生改变时触发 |
whitespace | boolean | type必须设置为string，要为仅包含空格的字符串可以whitespace设置为true |
transform | function | 在验证之前转换值 |
defaultField | array/object | type为数组或对象类型时一起使用，用来验证数组或对象中包含的所有值，进行深层验证 |
fields | object | type为数组或对象类型时一起使用，分别验证array/object类型的数据中的值，实现深度验证 |
validator | function | 验证器，可以为指定字段自定义验证函数：function(rule, value, callback) |
asyncValidator | function | 异步验证器，可以为指定字段自定义异步验证函数 function(rule, value, callback) |
message | string/jsx/function等 | 根据需要将消息分配给规则 |
下面详细介绍参数属性说明
type
表明要使用验证器的类型，类似数据格式检验，其中还有email、url、regexp、method等特定格式字段的验证。
使用这个，我们就可以对一些特定的字段进行校验，而不用再像以前一样写正则，做判断。
比如只需要配置 type:‘email’ 的规则就可以验证email了，验证器都已经封装好了这些功能，你只需调用就可以了。
可识别的类型值有：
string | 字符串类型（默认值） |
number | 数字类型 |
boolean | 布尔类型 |
method | 函数类型 |
regexp | 正则表达式 |
integer | 整型 |
float | 双精度浮点型数字 |
array | 数组类型 |
object | 对象类型 |
enum | 枚举值 |
date | 日期格式 |
url | 网址格式 |
hex | 16进制数字 |
电子邮箱格式 | |
any | 任意类型 |
//验证电子邮箱的完整示例代码
email = [{
type: "string",
required: true,
message: '请输入邮箱地址',
trigger: 'blur'
},
{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change']
}
]如上，实现了文本框失去焦点进行非空检验，失去焦点、内容改变进行格式验证，并给出相应提示.
required
必填字段，即非空验证。如上面实例中的的非空验证，以及邮箱前边的必填符号*，就是这个参数的功劳。
pattern
正则表达式，如果需要验证手机号码之类，可以直接编写正则表达式配置到校验规则中，那么就不需要自己去校验了，由校验器自动校验。
{ type : "string" , required: true , pattern : /^[a-z]+$/ }min/max
判断数据大小范围，通常对数字大小范围做校验。对于字符串和数组类型，将根据长度进行比较。
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }len
长度验证，如11位手机号码。
roles: {
type: "array", required: true, len: 11
}trigger
取值为blur/change, blur失去焦点时触发，change:值发生改变时触发
enum
枚举值验证，示例代码如下：
role: {type: "enum", enum: ['admin', 'user', 'guest']}whitespace
验证是否只有空格(如果没有该配置，则全空格的输入值也是有效的）。
whitespace: [{
type: "string",
message: '只存在空格',
whitespace:true,
trigger: ['change', 'blur']
}]transform
有时有必要在验证之前转换值，以强制或以某种方式对其进行清理。为此 transform ，向验证规则添加一个功能。在验证之前，先转换属性，然后将其重新分配给源对象，以更改该属性的值。
transform: [
{
type: 'enum',
enum: [2,4,6],
message: `结果不存在`,
trigger: ['change', 'blur'],
transform(value) {
return Number(value * 2)
}
}
]如上，只有输入1、2、3的时候才能校验通过,这个只能辅助校验，并不能改变组件绑定变量本身的值。
fields
深层规则，可以通过将嵌套规则分配给规则的属性来验证object或array类型的验证规则，如地址对象的省市区的规则验证：
object类型：
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"}
}
}
array类型：
roles: {
type: "array", required: true, len: 3,
fields: {
0: {type: "string", required: true},
1: {type: "string", required: true},
2: {type: "string", required: true}
}
}messages
未通过校验的提示信息：
{name:{type: "string", required: true, message: "Name is required"}}支持html:
{name:{type: "string", required: true, message: "<b>Name is required</b>"}}支持vue-i18n:
{name:{type: "string", required: true, message: () => this.$t( 'name is required' )}}validator
可以为指定字段自定义验证函数——这就相当于把前边配置的东西用js按照以前的方式编写验证逻辑了。虽然麻烦点，但是能实现比较复杂的业务逻辑判断。
例如：判断密码是否为空
data(){
var checkPass= (rules,value,callback) =>{
if(value ==''){
callback(new Error('请输入密码'));
}else{
callback();
}
}
return{
rules：{
pass：[vaildatot:checkPass,trigger:blur]
}
}
}总结
到此这篇关于ElementUI中el-form组件的rules参数举例详解的文章就介绍到这了,更多相关ElementUI el-form组件rules参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！