目的: 对表单元素进行字段验证并返回错误处理数据
1: 定义验证字段结构,验证数据类,value表示需要验证的字段的值,id表示验证的字段key,rules里面定义规则数组,type表示类型,errmessge表示失败错误提示i,value表示验证规则。
type: 提供验空,长度,最大长度,最小长度判断,另外还可自定义验证规则,自定义规则为正则表达式
代码如下:
export class VerifyData {
value = ''; // 验证数据
id = ''; // 验证字段
rules: VerifyRule[] = []; // 验证规则
}
export class VerifyRule {
type = ''; // 验证规则类型 isRequired 验空 length 长度判断 minLength 最小长度 maxLength 最大长度 customRule 自定义规则(正则表达式)
errMessage = ''; // 错误信息
value: any = null; // 验证规则
}
2:定义验证结果返回类型,字段包括id,验证字段,message,错误数据,代码如下:
export class ErrorVerify {
id = ''; // 验证字段
message: string[] = []; // 错误信息
}
3:定义一个单例对象,实现验证功能。
思路: 1: 循环处理验证数据
2: 循环处理每个验证数据项的验证规则
3: 定义type类型处理函数
优化: 1: 一检测到错误立即退出函数
最终代码如下:
export const FormDriver{
/*
* 表单验证
* verifiesData : 验证数据对象
* once: 为true只返回一条错误信息 选填
* */
checkForm(verifiesData: VerifyData[], once?: boolean): ErrorVerify[] {
const result: ErrorVerify[] = [];
if (!verifiesData) {
return result;
}
verifiesData.some(item => {
const p = {
id: item.id,
message: []
};
p.message = this.rulesHandle(item, once);
if (p.message.length > 0) {
result.push(p);
}
if (result.length > 0 && once) {
return true;
}
});
return result;
},
/*
* 验证规则并获取输出错误信息
* */
rulesHandle(verifyData: VerifyData, once?: boolean): string[] {
const result: string[] = [];
verifyData.rules.some(rule => {
const verifyResult = this.ruleTypeCheckHandle(verifyData.value, rule);
if (verifyResult) {
result.push(verifyResult);
}
if (result.length > 0 && once) {
return true;
}
});
return result;
},
/*
* 验证规则处理
* */
ruleTypeCheckHandle(value: string, rule: VerifyRule): string {
let result = null;
switch (String(rule.type)) {
case 'isRequired':
if (!value.trim()) {
result = rule.errMessage;
}
break;
case 'length':
if (String(value).trim().length !== Number(rule.value)) {
result = rule.errMessage;
}
break;
case 'minLength':
if (String(value).trim().length < Number(rule.value)) {
result = rule.errMessage;
}
break;
case 'maxLength':
if (String(value).trim().length > Number(rule.value)) {
result = rule.errMessage;
}
break;
case 'customRule':
if (!rule.value.test(value)) {
result = rule.errMessage;
}
break;
}
return result;
}
}