1.引入文件-graceChecker
/**数据验证（表单验证）- graceChecker*/
module.exports = {
error: '',
check: function(data, rule) {
for (var i = 0; i < rule.length; i++) {
if (!rule[i].checkType) {
return true;
}
if (!rule[i].name) {
return true;
}
if (!rule[i].errorMsg) {
return true;
}
if (!data[rule[i].name]) {
this.error = rule[i].errorMsg;
return false;
}
switch (rule[i].checkType) {
case 'string':
var reg = new RegExp('^.{' + rule[i].checkRule + '}$');
if (!reg.test(data[rule[i].name])) {
this.error = rule[i].errorMsg;
return false;
}
break;
case 'int':
var reg = new RegExp('^(-[1-9]|[1-9])[0-9]{' + rule[i].checkRule + '}$');
if (!reg.test(data[rule[i].name])) {
this.error = rule[i].errorMsg;
return false;
}
break;
break;
case 'between':
if (!this.isNumber(data[rule[i].name])) {
this.error = rule[i].errorMsg;
return false;
}
var minMax = rule[i].checkRule.split(',');
minMax[0] = Number(minMax[0]);
minMax[1] = Number(minMax[1]);
if (data[rule[i].name] > minMax[1] || data[rule[i].name] < minMax[0]) {
this.error = rule[i].errorMsg;
return false;
}
break;
case 'betweenD':
var reg = /^-?[1-9][0-9]?$/;
if (!reg.test(data[rule[i].name])) {
this.error = rule[i].errorMsg;
return false;
}
var minMax = rule[i].checkRule.split(',');
minMax[0] = Number(minMax[0]);
minMax[1] = Number(minMax[1]);
if (data[rule[i].name] > minMax[1] || data[rule[i].name] < minMax[0]) {
this.error = rule[i].errorMsg;
return false;
}
break;
case 'betweenF':
var reg = /^-?[0-9][0-9]?.+[0-9]+$/;
if (!reg.test(data[rule[i].name])) {
this.error = rule[i].errorMsg;
return false;
}
var minMax = rule[i].checkRule.split(',');
minMax[0] = Number(minMax[0]);
minMax[1] = Number(minMax[1]);
if (data[rule[i].name] > minMax[1] || data[rule[i].name] < minMax[0]) {
this.error = rule[i].errorMsg;
return false;
}
break;
case 'same':
if (data[rule[i].name] != rule[i].checkRule) {
this.error = rule[i].errorMsg;
return false;
}
break;
case 'notsame':
if (data[rule[i].name] == rule[i].checkRule) {
this.error = rule[i].errorMsg;
return false;
}
break;
case 'email':
var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (!reg.test(data[rule[i].name])) {
this.error = rule[i].errorMsg;
return false;
}
break;
case 'phoneno':
var reg = /^1[0-9]{10,10}$/;
if (!reg.test(data[rule[i].name])) {
this.error = rule[i].errorMsg;
return false;
}
break;
case 'zipcode':
var reg = /^[0-9]{4}$/;
if (!reg.test(data[rule[i].name])) {
this.error = rule[i].errorMsg;
return false;
}
break;
case 'reg':
var reg = new RegExp(rule[i].checkRule);
if (!reg.test(data[rule[i].name])) {
this.error = rule[i].errorMsg;
return false;
}
break;
case 'in':
if (rule[i].checkRule.indexOf(data[rule[i].name]) == -1) {
this.error = rule[i].errorMsg;
return false;
}
break;
case 'notnull':
if (data[rule[i].name] == null || data[rule[i].name].length < 1) {
this.error = rule[i].errorMsg;
return false;
}
break;
case 'texts':
var reg = /^[\u2E80-\u9FFF]+$/;
if (!reg.test(data[rule[i].name])) {
this.error = rule[i].errorMsg;
return false;
}
break;
}
}
return true;
},
isNumber: function(checkVal) {
var reg = /^-?[1-9][0-9]?.?[0-9]*$/;
return reg.test(checkVal);
}
}
2.验证步骤
import graceChecker from '@/common/graceChecker'; // 引入graceChecker，来自 graceUI 的表单验证
/** 验证步骤
** 1.定义验证规则；
** 2.验证类型及规则；验证通过返回true 失败返回 false 并使用 graceChecker.error 属性记录对应的验证错误
**/
var rule = [
{name:"数据键名称", checkType: "验证类型", checkRule: "验证规则", errorMsg: "错误提示信息" },
];
如
var rule = [
{ name: "nickname", checkType: "string", checkRule: "1,3", errorMsg: "姓名应为1-3个字符" },
{ name: "gender", checkType: "in", checkRule: "男,女", errorMsg: "请选择性别" }
];
var checkRes = graceChecker.check({nickname: this.nickname}, rule);
console.log('验证结果', checkRes)验证类型及规则
1. string
功能 : 字符串及长度检查
规则 : 最小长度,最大长度
如 :
1,3 代表 1到3个字符
2, 代表只检查最短2个字符
2,2 代表等于2个字符
2. int
功能 : 整数及长度检查
规则 : 最小长度,最大长度 如 1,3
3. between
功能 : 数值区间检查
规则 : 最小值,最大值 如 1,3 或 2.5,1000
4. betweenD
功能 : 数值区间检查【整数】
规则 : 最小值,最大值 如 1,3 或 2,1000
5. same
功能 : 等值检查
规则 : 对应的值
6. notsame
功能 : 不等值检查
规则 : 对应的值
7. email
功能 : 邮箱检查
规则 : 无需设置
8. phoneno
功能 : 11位手机号检查
规则 : 无需设置
9. zipcode
功能 : 6位邮编检查
规则 : 无需设置
10. reg
功能 : 正则表达式检查
规则 : 正则表达式内容 如 "^[0-9]{1,2}$"
11. in
功能 : 包含某个字符串的检查
规则 : 字符串集，如："北京,上海"
12. notnull
功能 : 不为空检查【null 或者 空数组】
规则 : 无需设置
13. samewith
功能 : 等于某个设定的元素的值 [ 常用于密码检查 ]
规则 : 元素的name属性
14. numbers
功能 : 数字组成的字符长度检查 [ 和整数不同，这个规则允许 0123... ]
规则 : 最小长度,最大长度
如 :
1,3 代表 1到3个数字
2, 代表只检查最短2个数字
2,2 代表等于2个数字