搭建规则
为了方便单元测试，也就是测试代码，所以我这里就以react脚手架为例生成本项目。执行一下脚手架生成命令，前提是提前装好 create-react-app
npx create-react-app my-app --template typescript
--template为指定模板的关键字，我这里使用了typescript，下一步开始封装工作。
前置工作
我这里封装是基于antd form中的Rule接口展开的，具体属性见下图：
Rule
为了保证
antd form原有验证的完整性，所以这里只对Rule类做扩展，方便自身业务验证开展的同时也保证原有验证方式不变。
实现思路
在antd的rule基础上进行封装，根据具体业务对其进行修改rule里面的结构，也就是对rule的validator方法中进行自定义验证，在具体业务场景上直接调用相应验证方法即可，不需要写 rule的结构。
实现逻辑
- 第一步
在代码中创建core.ts，并引入Rule的type
import { Rule } from 'rc-field-form/lib/interface';
注意，这里如果没有新内容的增加的话可以不扩展，我是考虑以后可能会扩展所以有自己定义了两个type方便以后扩展用
export type RuleTypes = Rule & {
[key: string]: any;
};
export type RuleTypesArray = RuleTypes[]; //antd form验证要求rule是数组，因此这里定义了数组，方便一次性验证多个
- 第二步
创建验证工厂方法用于生成Rule格式的数据
export function ValidatorFactory(propType: RuleTypes): RuleTypes
export function ValidatorFactory(propType: RuleTypes, ...others: RuleTypesArray): RuleTypesArray
export function ValidatorFactory(propType: RuleTypesArray): RuleTypesArray
export function ValidatorFactory(propType: RuleTypes | RuleTypesArray, ...others: RuleTypesArray): RuleTypesArray {
const tmpRuleTypes: RuleTypesArray = [];
if (propType instanceof Array) propType.push(...propType);
else tmpRuleTypes.push(propType);
if (others && others.length)
others.forEach((ele: any) => {
if (ele instanceof Array)
tmpRuleTypes.push(...ele);
else tmpRuleTypes.push(ele);
});
return tmpRuleTypes;
}
针对不同参数做方法的重载，以保证对应多种参数模式都能够返回相同的数据格式。这里只是做了数据的一致性，并没有做对自定义validator的支持。
- 第三步
创建对validator的支持，在项目下创建validIdentity.ts文件，我这里以验证身份证号为例。填入以下代码
const idCartUtil: any = {
isIdCardNoFormat: function (card: string) {
//身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
let reg = /(^\d{15}$)|(^\d{17}(\d|X|x)$)/;
return reg.test(card);
},
checkIdCardProvince: function (card: string) {
let province = card.substr(0, 2);
return idCartUtil.vcity[province] !== undefined;
},
vcity: {
11: "北京市", 12: "天津市", 13: "河北省", 14: "山西省", 15: "内蒙古自治区",
21: "辽宁省", 22: "吉林省", 23: "黑龙江省", 31: "上海市", 32: "江苏省",
33: "浙江省", 34: "安徽省", 35: "福建省", 36: "江西省", 37: "山东省", 41: "河南省",
42: "湖北省", 43: "湖南省", 44: "广东省", 45: "广西壮族自治区", 46: "海南省", 50: "重庆市",
51: "四川省", 52: "贵州省", 53: "云南省", 54: "西藏自治区", 61: "陕西省", 62: "甘肃省",
63: "青海省", 64: "宁夏回族自治区", 65: "新疆维吾尔族", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外"
},
//检查生日是否正确
getIdCardBirthday: function (card: string) {
const len = card.length;
//身份证15位时，次序为省（3位）市（3位）年（2位）月（2位）日（2位）校验位（3位），皆为数字
if (len === 15) {
let re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/;
let arr_data = card.match(re_fifteen) || [];
let year = arr_data[2];
let month = arr_data[3];
let day = arr_data[4];
let birthday = new Date('19' + year + '-' + month + '-' + day);
return idCartUtil.verifyBirthday(birthday) ? birthday : false;
}
//身份证18位时，次序为省（3位）市（3位）年（4位）月（2位）日（2位）校验位（4位），校验位末尾可能为X
if (len === 18) {
let re_eighteen = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X|x)$/;
let arr_data = card.match(re_eighteen) || [];
let year = arr_data[2];
let month = arr_data[3];
let day = arr_data[4];
let birthday = new Date(year + '-' + month + '-' + day);
return idCartUtil.verifyBirthday(birthday) ? birthday : false;
}
return false;
},
verifyBirthday: function (birthday: any) {
birthday = typeof birthday === "string" ? new Date(birthday) : birthday;
let now = new Date();
let now_year = now.getFullYear();
let age = now_year - birthday.getFullYear();
return (age >= 0 && age <= 150);
},
//校验位的检测
checkParity: function (card: string) {
if (card.length === 15)
return true;
else if (card.length === 18) {
return card.substr(17, 1) === idCartUtil.getParityDigit(card);
} else
return false;
},
getParityDigit: function (card: string) {
if (card.length !== 18 && card.length !== 17)
return false
let arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
let arrCh = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
let cardTemp = 0;
for (let i = 0; i < 17; i++) {
let num = Number(card.substr(i, 1));
cardTemp += num * arrInt[i];
}
return arrCh[cardTemp % 11];
},
change18To15: function (card: string) {
if (card.length !== 18)
return false
return card.substr(0, 6) + card.substr(8, 9)
},
//15位转18位身份证号
change15To18: function (card: string) {
if (card.length !== 15) return false
card = card.substr(0, 6) + '19' + card.substr(6, 9);
card += idCartUtil.getParityDigit(card);
return card;
},
};
export function validIdentity(card: string) {
card = card.toUpperCase();
const r: any = {};
if (card === '') {
return false;
}
//校验长度，类型
if (idCartUtil.isIdCardNoFormat(card) === false) {
return false;
}
//检查省份
if (idCartUtil.checkIdCardProvince(card) === false) {
return false;
}
//校验生日
r.dob = idCartUtil.getIdCardBirthday(card);
if (r.dob === false) {
return false;
} else {
//检验位的检测
if (idCartUtil.checkParity(card) === false) {
return false;
} else {
return true;
}
}
}
这里做了对身份证号的验证，最后抛出了validIdentity函数用于验证身份证号。
- 第四步
封装自定义的validator支持，在core.js中引入刚刚写好的validIdentity函数。
import { validIdentity } from "./validIdentity"
引入后创建CustomerValidatorFunction对象，添加validator的实现。注意antd rule 的validator接受两个参数(rule: any, value: string) => Promise用于自定义验证，因此我们在CustomerValidatorFunction对象中添加以下代码
const CustomerValidatorFunction: any = {
checkIdentity(rule: any, value: string) {
if (!value) return Promise.reject("身份证号码不能为空");
const result = validIdentity(value);
if (result) return Promise.resolve();
return Promise.reject("身份证号码不正确");
}
}
- 第五步
将自定义validator函数添加到antd rule中并抛出CustomerValidator函数就完成了自定义的工作，因此我们添加以下代码
function genCustomerValidatorFunction(t: any) {
const extendResult: any = {};
if (typeof t == "object" && t !== null) {
const keys = Object.keys(t);
keys.forEach((ele: string) => {
const foo = t[ele];
const validator: RuleTypes = { validator: foo };
extendResult[ele] = ValidatorFactory(validator);
});
}
return extendResult;
}
let CustomerValidatorFunctionObj: any = null;
(function (t) {
CustomerValidatorFunctionObj = genCustomerValidatorFunction(t);
})(CustomerValidatorFunction);
export const CustomerValidator = CustomerValidatorFunctionObj;
做完上述的五个步骤就完成了antd form的自定义验证工作，但是为了更好的开放给其他人应用，因此我们还需要添加一个扩展函数，用于其他人在不侵入的前提下自定义验证。
- 第六步
添加extend函数并抛出
export function extend(extendObj: any) {
return genCustomerValidatorFunction(extendObj);
}
大功告成，开始测试
在antd项目中引入自定义的validator函数
import * as React from "react";
import { Form, Button, Input,Select} from "antd";
import {CustomerValidator,ValidatorFactory} from "grt-antd-form-validator/packages/types/core";
······
······
效果