创建通用的表单校验逻辑库

Posted 2020-08-26 laden666666

表单校验一直是web开发中最基础，也是最不好做的一个环节。说是基础，相信多少从事web开发的人第一件事就是学习如果基于js、jQuery实现表单验证工作。在10年前，甚至是5年前，javascript还是被多数工程师轻视的一门语言，那时候很多人认为JavaScript充其量也就能完成一部分表单校验的工作。由此可知表单校验是多么基础的一件事情；说它不好做，是因为表单校验往往工作量极大，可以说是一个没太大技术含量但是很耗费体力的活，而且在一些对交互友好性要求较高的项目中，表单校验就更加费事了。

于是我们往往依赖于一些现成的表单校验框架，如：jQuery-validation、validation-engine、easy-ui-validation等。但是这些库仅能用于固定的场合，提示的形式也相当固定，在现在这个基于模板的年代，表单的验证的逻辑部分比起提示的形式更加重要。

分析以上js库，可以发现他们有个共同的特点，就是采用策略模式，将不同的表单校验规则封装成策略类，提高校验逻辑的复用性；同时提供“规则字符串”的形式，让用户通过一个简单的字符串来创建规则实例对表单的输入项完成校验。这样的设计使得表单校验由一个体力活变成了一个配置项，大大降低了表单校验相关的代码量。可惜的是以上控件虽然都是使用这样的逻辑，但是立足点却是表单的提示，其逻辑部分无法单独使用。

所以基于以上控件的表单验证特点，笔者开发了一个表单校验库，更准确说是表单校验逻辑库——my-validation，这个库仅提供表单校验的逻辑，使用简单的api可将复杂的表单验证过程变得简单，便于校验的逻辑复用，并返回带有提示语句的错误结果列表，方便嵌入任何框架中，完成表单校验的逻辑部分。

---

安装方法:

webpack中使用:

npm install git://github.com/laden666666/my-validation --save

然后直接用reqiure引用即可

var myValidation = require("my-validation");

如果是浏览器环境直接script标签引用my-validation.js或者my-validation.min.js文件即可。 

---

使用方法:

1.根据规则字符串校验：

共提供两个两个重载api：

myValidation.validation(ruleStringString, valueString, isStringPath)

参数	参数描述
ruleStringString	规则的字符串
valueString	要校验的字符串

MyValidation.validation(ruleStringJson, values, isStringPath) 

参数	参数描述
ruleStringJson	规则的字符串的集合
values	要校验的字符串的集合
isStringPath	启用子对象key的路径的做key的模式，校验路径对应子对象的属性

规则的字符串是校验的核心，格式是“规则1名[参数1,参数2…];规则2名[参 数1,参数2…]…”。 
如：“required;minSize[5]”表示使用required规则校验，校验非空；然后 使用minSize规则校验，参数是5，表示字符串长度不能小于5 
规则的字符串中特殊字符有“;”、“,”两个，需要转义，转义字符分别为“;;”、“;,”

使用的时候可以直接校验一个字符串，如:

var result = myValidation.validation("required;sizeMax[16]", "test"); 

也可以根据一json，完成对一个对象的校验，并且支持微信小程序那种使用过子对象key的路径的key的功能，如：

var result = myValidation.validation({
    "user.name" : "required;sizeMax[16]",
},{
     user : {
          name : "test"
     }
},true) 

myValidation.validation返回的结果是校验规则结果的数组。 

2.注册自定义规则：

校验规则相当于一个策略模式的实现，如果不能自定义规则，这个校验系统就相当于断了翅膀的鸟，没有任何自由度可言。所以能够提供动态扩展规则的api是非常重要的。

myValidation.registerRule(name, validationFn, msg)

 

参数	参数描述
name	规则的名称
validationFn	校验函数
msg	默认的错误提示语句,支持字符串或函数

动态生成默认错误提示的例子如:

myValidation.registerRule("minSize", function (value, object, count) {
    return !!value && value.length >= parseInt(count);
},function (value, object, count) {
    return "最少输入" + count + "个字符数";
});

指定默认错误提示的例子：

myValidation.registerRule("integer", function (value, object) {
    return !!value && /^[-+]?\d+$/.test(value);
}, "必须是整数");

校验函数是表单校验的核心，通过上面的两个例子我们能够校验函数的定义方式，他的具体参数如下： 

参数	参数描述
value	要校验的值
object	校验的对象，包括校验字符串，和用户其他自定义属性
params	校验字符串的参数列表，是rest参数。如xx[a,b,c]，这里会解析出3个参数，分别为：“a”、“b”、“c”

同时校验失败的情况下必须返回false或者是调用myValidation.result生成的返回结果，否则视为校验成功。

3.自定义返回错误提示：

有时候需要在验证的时候动态的生成返回错误，而不是返回默认错误，此时可以使用以下api：

myValidation.result (result, msg)

 

参数	参数描述
result	boolean型，校验的结果，仅当false时候表示验证失败
msg	验证失败的字符串，提示这个字符串的优先级比默认字符串高

如：

myValidation.registerRule("returnMsg", function () {
    return myValidation.result(false, "自定义错误提示");
}, "此为默认提示，会被覆盖掉");

 

---

默认校验库:

参数	参数描述	例子
required	必填	required
minSize	要求字符串长度不大于指定值	minSize[5]
maxSize	要求字符串长度不小于指定值	maxSize[5]
min	必须是数字，并要求不小于指定值	min[5]
max	必须是数字，并要求不大于指定值	max[5]
number	必须是数字	number
integer	必须是整数	integer

目前仅提供几个笔者马上要使用的规则，其他规则大家可以自己通过myValidation.registerRule注册。