element-ui的表单验证主要分三部分:
- validate
- options
- rules
最常用的是rules.
定义rule可以有三种形式:
- 函数: { name(rule, value, callback, source, options) {} }
- 对象: { name: { type: 'string', required: true } }
- 数组: { name: [{ type: 'string' }, { required: true }] }
函数的方式我自己也没有学会,暂时不说了.对象和数组的方式比较简单,也比常用.数组的方式,其实就是对象的方式的组合.
element-ui有定义好了很多的默认规则,并且还可以使用默认规则里的validator进行扩展自定义.
默认规则:
- type: 数据的类型,默认的type见"默认type"一节
- required: 是否必填,true or false
- pattern:使用正则来验证
- min: 数据的长度的最小值 (数据类型必须是string或array)
- max: 数据的长度的最大值 (数据类型必须是string或array)
- len: 数据的长度必须等于这个值 (数据类型必须是string或array)
- enum: 数据的值必须等于这个枚举数组某个元素 { enum: [a, b, c] },注意需要type设置为enum
- transform: 一个钩子函数,在开始验证之前可以对数据先处理后验证,如吧number转为string后再验证
- message: 报错的提示信息,可以是字符串也可以是jsx标签Name is required
- validator: 自定义验证函数以及报错信息 validator_name(rule, value, callback)
默认的type(对应默认规则的type部分取值):
- string:String类型,type默认的取值
- number:Number类型,如果后台返回的数据是字符串,可以用transform转为Number类型
- boolean: Boolean类型
- method: 必须是Function
- regexp:必须是正则RegExp
- integer:是Number类型的正整数
- float: 是Number类型的浮点数
- array: 是Array.isArray通过的数组
- object: Array.isArray不通过的Object类型
- enum: 先定义enum,值必须是enum枚举数组某个元素
- date: Date对象的实例
- url: String类型且符合链接格式
- hex: Hex类型(十六进制)
- email: String类型且符合邮箱格式
示例一,对象形式:
<el-form :model="addForm" label-width="80px" ref="addForm">
<el-form-item label="列表标题"
prop="title"
:rules="{
required: true, min:2, max:128, message: '亲,至少要输入两个字', trigger: 'blur'
}">
<el-input placeholder="请输入列表标题" v-model="addForm.title"></el-input>
</el-form-item>
</el-form>
data() {
return {
addForm: {
title: ''
}
}
}
示例二,数组形式:
<el-form :model="addForm" label-width="80px" ref="addForm">
<el-form-item label="列表标题"
prop="title"
:rules="[
{required: true, message: '亲,必须要输入点东西', trigger: 'blur'},
{min:2, max:128,message: '亲,至少输入两个字;最多不超过128个字', trigger: 'blur'}
]">
<el-input placeholder="请输入列表标题" v-model="addForm.title"></el-input>
</el-form-item>
</el-form>
示例三,自定义验证函数:
<el-form :model="addForm" label-width="80px" ref="addForm">
<el-form-item label="年龄"
:prop="age"
:rules="{
validator: rule_age,trigger: 'blur'
}">
<el-input placeholder="请输入年龄" v-model="addForm.age" auto-complete="off"></el-input>
</el-form-item>
</el-form>
....
// 年龄校验方法
rule_age(rule,value,callback) {
// 0如果是合法值,需要单独判断,否则会被!value作为真
if (value === 0) {
return callback()
}
if (!value) {
return callback(new Error('请输入年龄'));
};
let n = Number(value);
if (n < 1) {
return callback(new Error('年龄不能小于1岁'));
} else if (n > 200) {
return callback(new Error('年龄不能大于200岁'));
};
callback();
},
...
// 提交,$refs.addForm 对应ref="addForm"
submit() {
this.$refs.addForm.validate((valid) => {
if (valid) {
console.log("验证通过")
} else {
console.log("验证不通过")
return false
}