Element UI Form表单验证
2020-12-18 本文已影响0人
努力与幸运
Form组件提供表单验证的功能,只需要通过rules属性传入约定的验证规则,并将Form-Item的prop属性设置为需校验的字段名即可。
rules中单个表单域校验规则可以包含多个数组,每个数组即是一条校验规则:
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]
数组中的单个校验规则对象中包含required/message/trigger/min/max等参数。
type
表明要使用验证器的类型,类似于数据格式校验,使用这个,可以对一些特定的字段进行校验,不用像之前那样写正则了。
可识别的类型值有:
- string: 字符串类型(默认值)
- number: 数字类型
- boolean:布尔类型
- method: 函数类型
- regexp:正则表达式
- integer: 整型
- float: 双精度浮点型数字
- array: 数组类型
- object: 对象类型
- enum: 枚举值
- date: 日期格式
- url: 网址格式
- hex: 16进制数字
- email: 电子邮箱格式
- any: 任意类型
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
长度验证
enum
枚举值验证
role: {type: "enum", enum: ['admin', 'user', 'guest']}
whitespace
验证是否只有空格(如果没有该配置,则全空格的输入也是有效的)
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类型的验证规则,
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}
}
}