文章目录
- 校验的入门使用
- 1、关于rules属性
- 2、提交时的验证
- 3、校验规则介绍
- 3.1 判断是否必须
- 3.2 数据类型判断
- 3.3 正则校验
- 3.4 数据范围判断
- 表单校验的进阶使用
- 1、对象嵌套时的校验
- 2、深层校验规则Deep rules
- 3、自定义校验器validator
- 4、动态增减表单项及其涉及到的表单项嵌套校验
- 补充
最近表单验证用的比较多，于是花点时间整理了下自己开发过程中用过的一些方式，同时简单的整理了下elementui表单验证的基本使用并记录了下来，本文分享了个人使用表单规则校验的一些心得体会，仅供参考。
校验的入门使用
1、关于rules属性
首先表单中与规则校验有关的属性就是rules了，如果只需要对单独某一个表单项进行规则校验，那么我们可以直接将rules属性和校验规则写在单独的一个表单项中，例如：
<el-form-item
prop="email"
label="邮箱"
:rules="[
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]"
>
<el-input v-model="queryForm.email"></el-input>
</el-form-item>如果需要对多个表单项进行校验，那么可以使用更加方便的写法，即用一个变量来声明校验规则（注意该变量位于data配置项中），并且在el-form标签中使用rules属性绑定定义的校验规则，例如：
<el-form :model="queryForm" :rules="rules">
<el-form-item label="用户名" prop="username">
<el-input type="username" v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="ruleForm.password"></el-input>
</el-form-item>
</el-form><script>
export default {
data() {
return {
username:'',
password:'',
// 校验规则,注意是个对象
rules:{
username:[{ required: true, message: '请输入用户名', trigger: 'blur' }],
password:[
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min:6,max:30,message:"密码长度为 6 - 30 位", trigger: 'blur'}
]
}
}
}
}
</script>使用这种方式进行验证需要注意的是，rules对象中的属性名要和prop属性的取值相匹配才能进行对应的验证。
2、提交时的验证
兜底校验就是指在表单提交时，对所有需要进行校验的表单项全部进行一次校验，如果存在校验不通过的，则不能提交。
<el-form :model="queryForm" :rules="rules" refs='formName'>
<!-- ... -->
</el-form>submitForm(formName) {
this.$refs[formName].validate((valid) => {
// 校验通过
if (valid) {
// ...
alert('submit!');
} else {
// 校验失败
// ...
console.log('error submit!!');
return false;
}
});
},3、校验规则介绍
下面是校验规则中的一些属性及其功能介绍：
3.1 判断是否必须
active:[{ required: true, message: '请输入活动名称', trigger: 'blur' }]required: true，值为true时表示该表单项必须进行校验，值为false时则为非必须；
message是校验失败时的信息提示；
trigger表示触发校验的时机，有两个取值，“blur"和"change”，前者表示失去焦点时触发校验，通常用于input输入框中，后者表示值发生改变时触发校验，通常用于select选择框中。
3.2 数据类型判断
{ type: 'number',min: 2, message: '请输入不少于2个字符', trigger: 'blur' },type，用于进行数据的类型判断，常用的取值有如下：
-
string，字符串类型，默认类型 -
number，数字类型，包括整数和小数 -
integer，整数类型，不能是小数类型 -
float，浮点数类型，必须是小数类型 -
boolean，布尔类型，false/true -
array，数组类型 -
object，对象类型，不能为数组 -
enum，枚举类型，同时需要声明枚举类型 -
method，函数类型 -
regexp，正则类型，必须是一个合法的正则表达式，可以通过new RegExp来创建，不过目前有一个pattern属性可以来进行正则校验，所以这个类型并不常用 -
date，日期类型 -
url，必须是符合url格式的 -
email，必须符合邮箱格式 -
hex，16进制表示的形式，如：0xFF12 -
any，任意类型
定义了type的类型时，则必须为对应类型的值才能通过校验。（type为array、object、method、regexp类型时的情况我目前还没遇到过，就到时遇到了再补上吧）
- 我们先简单看下
email，url这两个类型
<el-form-item
prop="email"
label="邮箱"
:rules="[
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]"
>
<el-input v-model="queryForm.email"></el-input>
</el-form-item>
<el-form-item
prop="url"
label="url"
:rules="[
{ required: true, message: '请输入url', trigger: 'blur' },
{ type: 'url', message: '请输入正确url地址', trigger: ['blur', 'change'] }
]"
>
<el-input v-model="queryForm.url"></el-input>
</el-form-item>只有输入合理的邮箱格式（例如：123@qq.com）和url地址（例如http:localhost:8080）才能通过校验。
- 再看下对于
number、integer、float类型
由于input默认获取的是字符串类型的数据，所以我们要转换输入的值的类型，有两种方式，一种是使用vue所自带的.number属性进行转换，即在v-model后面调用该属性，v-model.number，另一种是使用校验规则的transform函数。
- 使用
.number进行转换，如下
<el-form-item
prop="number"
label="数字编号"
:rules="[
{ required: true, message: '请输入数字编号', trigger: 'blur' },
{ type: 'integer', message: '请输入正确的数字编号', trigger: ['blur', 'change'] }
]"
>
<el-input v-model.number="queryForm.number"></el-input>
</el-form-item>- 使用
transform进行转换，使用如下：
age: [
{
type: 'integer',
message: "值要求为整数",
trigger: 'blur',
transform(value){ return parseInt(value); },
},
],transform是一个钩子函数，在开始验证之前可以对数据先处理后验证。
这里更简洁的写法有:
age: [
{
type: 'integer',
message: "值要求为整数",
trigger: 'blur',
transform: Number,
},
],当然transform还有其他的用法，例如：
位于某个指定区间的数才能通过校验
age: [
{
type : 'string',
message: "值要求为1-100的数",
transform(value){
return parseInt(value)>=1 && parseInt(value)<=100 ? "1" : "0";
},
}
],- 再瞧瞧enum枚举类型
id: [
{
type: 'enum',
enum: [1,4,6],
message: "结果不存在!",
trigger: ['change', 'blur'],
transform:Number,
},
],表示只有符合枚举中的值才能通过校验。不过需要注意的是，当输入的值为0时也能通过校验，这似乎是一个bug，所以在实际使用时还是要注意进行判断一下。
3.3 正则校验
正则校验时用到的是pattern属性，在这个属性中定义正则表达式进行校验，使用如下：
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ pattern:/^\w{3,6}$/, message:'用户名为 3 到 6 个字符', trigger: 'blur'},
],3.4 数据范围判断
name:[{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }]min和max是数据的取值范围，如果进行校验的类型是字符串String类型，则表示字符串长度在min和max之间，如果类型是数字number类型，那么表示数据的值在min和max之间，如果时array数组类型，则表示数组的长度，其他属性同上。
age:[{ type:'integer',message: "必须为6年级", len: 6,trigger:'blur', transform:Number, },]len属性，如果类型为string或array，则len表示长度；如果为数字型number，则数字值就是len属性值。
当len属性与min、max属性同时出现了，len属性有更高的优先级。
表单校验的进阶使用
1、对象嵌套时的校验
写好的校验规则是需要与指定的prop的值进行绑定的，而很多时候，prop的取值是常常与data配置项中的对象名一致，所以当对象进行嵌套的时候，我们怎么做呢？
例如，有如下嵌套的对象：
form:{
formData:{
username : '',
password : '',
// ...
},
// ...
},<el-form-item label="用户名：" prop="formData.username">
<el-input v-model="form.formData.username"></el-input>
</el-form-item>解决方式可以从校验规则的命名下手，如果像下面一样做是会报编译错误的
formData.username: [
{required: true, message: "用户名不能为空", trigger: 'blur'},
],最好使用引号将只包裹起来，变成变量的原始形式，这样就可以进行校验了，如下
'formData.username': [
{required: true, message: "用户名不能为空", trigger: 'blur'},
],2、深层校验规则Deep rules
对于对象Object或数组Array的校验，需要具体到每一个元素（成员），这里就要用到Deep rules，主要涉及两个属性fileds和defaultFiled两个属性。
- 对象的深层校验
rules : {
address: [{
type: 'object',
required: true,
options: { first: 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 : {
roles: [{
type: 'array',
required: true,
len: 3,
fields: {
0: [{ type: 'string', required: true }],
1: [{ type: 'string', required: true }],
2: [{ type: 'string', required: true }],
},
}],
};写代码最应该避免的就是代码重复，可以看到数组的深层校验是重复了多次了的，官方提供了defaultFiled属性来帮我们解决这个问题：
rules : {
roles: [{
type: 'array',
required: true,
len:3,
defaultField: { type: 'string', required: true },
}],
};3、自定义校验器validator
格式：
rules:{
username: [
{required: true, message: "用户名不能为空", trigger: 'blur'},
{validator:judgeValidator, trigger: 'blur'}
],
}judgeValidator时自定义的校验器回调函数，用于校验判断的，它可以写在外部js文件中，使用时导入并引用即可，或者也可以写在data配置中return{}外，又或者可以直接以函数形式写在校验规则中。
1、例如：写在某个js文件中
export function judgeValidator(rule, value, callback){
const reg= /^\w{6,10}$/;
if(value == '' || value == undefined || value == null){
callback();
}else {
if (!reg.test(value)){
// 校验失败
callback(new Error('应为任意6~10个小写英文字母组成'));
}else {
// 校验成功
callback();
}
}
}使用时导入js文件并进行方法的引用
2、例如，定义在data配置项中return{}之外
data(){
var judgeValidator = (rule, value, callback)=>{
const reg= /^\w{6,10}$/;
if(value == '' || value == undefined || value == null){
callback();
}else {
if (!reg.test(value)){
// 校验失败
callback(new Error('应为任意6~10个小写英文字母组成'));
}else {
// 校验成功
callback();
}
}
}
return{...}
}3、例如，直接函数形式定义在校验规则中
{
validator(rule, value, callback) {
const reg= /^\w{6,10}$/;
if(value == '' || value == undefined || value == null){
callback();
}else {
if (!reg.test(value)){
// 校验失败
callback(new Error('应为任意6~10个小写英文字母组成'));
}else {
// 校验成功
callback();
}
},
trigger: "blur",
}参数介绍
rule：指向当前的规则对象
value: 被校验的值
callback调用回调函数
通过了规则校验就直接调用callback()，没有通过规则检验，就调用callback(new Error('错误说明'))，当然也可以传入参数，不过要注意字符串格式化，例如：return callback(new Error(`${name} must be lowercase alphanumeric characters`));
4、动态增减表单项及其涉及到的表单项嵌套校验
补充
1、如果遇到不同模式进入表单，需要应用不同的规则的情况，例如新增和编辑操作，显示同一个页面组件，但此时对页面需要校验的属性字段有所不同，那么此时有两种处理方案：1、配置两套规则集，根据模式不同进行切换，2、配置两中模式的总规则及，根据不同模式抽取需要的规则。
为了切换规则时，立即执行规则校验，需要设置el-form的validate-on-rule-change为false
