element输入框校验规则

输入框校验规则几乎是所有项目中都会用到的东西
那些年,我们趟过了很多坑
遇到一个项目要求是字段和内容及输入校验规则都是从后端请求的(即动态表单)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import * as elValudate from '@/assets/js/elValidate' // 引入自定义校验方法

data(){
// 行内自定义校验
var validatePass = (rule, value, callback) => {
if (value === '' || value == undefined || value == 0) {
callback(new Error('请点击选择评分'));
}
callback();
};
return {
againForm:{},
againRules:{
againText:[
{ required: true, message: '请输入备注', trigger: 'blur' },
],
value:[
// { required: true, message: '请点击进行评分', trigger: 'blur' },
{validator:validatePass,trigger: 'change'},
],
phone:[
{validator:elValudate.elValidatePhone,trigger: 'blur'},
]
}
}
},
mounted(){
this.clearValidate('againForm') // 清除整个表单的校验
this.clearValidate('againValue') // 清除againValue的校验
},
methods : {
clearValidate(formName) {
this.$refs[formName].clearValidate();
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
rules.js
//
export function elValidatePhone(rule, value, callback) {
if (value == '') {
return callback(new Error('手机号码不能为空'))
} else {
let re = /^1[23456789]\d{9}$/;
if (!re.test(value)) {
return callback(new Error('手机号码输入格式有误'))
}
return callback();
}
}