时间戳

首页 > 技术文章 > 创建通用的表单校验逻辑库

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

laden666666 2017-01-06 00:51 原文

表单校验一直是web开发中最基础，也是最不好做的一个环节。相信很多初学web开发的人，第一课就是学习如果基于js、jQuery实现表单验证工作，在10年前，甚至是5年前，JavaScript还是被多数工程师轻视的一门语言，那时候很多人认为JavaScript的出现充其量也就为了完成web页面上的表单校验的工作。由此可知表单校验的确是web开发中相当基础的一项工作。说它不好做，是因为一些项目中表单校验往往工作量极大，一个字段要校验的项目非常多，例如非空、字符串长度限制等等，正常来说任何一个字段都需要进行校验，比如数据库每个字段的长度是有限的，所以最起码要校验一下字段的长度吧。所以，表单校验就是一项没太大技术含量，但是又非常耗费体力的工作，尤其在一些对交互友好性、用户体验要求较高的项目中，表单校验的开发就变得更繁琐与枯燥。

于是我们往往依赖于一些现成的表单校验框架，如：jquery-validation、validation-engine、easyui-validatebox等。

分析以上js库，可以发现他们有个共同的特点，就是采用策略模式，将不同的表单校验规则封装成策略类，提高校验逻辑的复用性；同时提供“规则字符串”的形式，让用户通过一个简单的字符串来创建规则策略类的实例，来对表单的输入项进行校验，校验的结果就是一个标志位加一个错误提示语句。这样的设计使得表单校验由一个体力活变成了一个配置项，大大降低了表单校验相关的代码量。

但是的以上控件都是按照这个逻辑实现的表单校验，但是他们立足点却是在表单的提示，与web页面结合过于紧密，其逻辑部分无法单独使用。而他们大多都是基于jQuery，现在很多web项目都不再依赖于jQuery；同时他们的提示方式也未必是我们想要的，对于如今的web项目而言，做将错误提示封装成组件是一件很容易的事情，真正需要的反而是表单校验的逻辑部分。

所以基于以上控件的表单验证特点，笔者开发了一个表单校验库，更准确说是表单校验逻辑库——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)
参数参数描述
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是非常重要的，扩展的api如下：

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

校验结果有两个：boolean型校验结果和一个字符串型的错误提示语

这个错误提示语句可以动态生成，也可以指定为通用的形式，如:

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);
}, "必须是整数");

boolean型校验结果的生成就要用到校验函数validationFn。校验函数是表单校验的核心，通过上面的两个例子我们能够校验函数的定义方式，他的具体参数如下： 

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

需要注意的是，校验失败的情况下必须返回fals或者是调用myValidation.result生成的返回结果，否则视为校验成功。

 

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

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

myValidation.result (result, msg)

 

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

如：

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

上面规则的错误返回提示语会是校验时候生成的“自定义错误提示”这句话，而不是注册时候设置的默认的提示语。

 

4.分析验证结果:

验证结果是个错误信息的数组,或者是一个key、value形式的json,但是表单验证的结果究竟是成功还是失败,我们无法马上得知。你可以通过遍历各个验证项的result字段,不断一个个相与来获得结果的boolean值,也可以直接使用我们的api函数：

myValidation.analyseResult (result)
参数参数描述
result validation的验证结果

如：

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

result = myValidation.analyseResult(result) //result被转为boolean型

默认校验库:

参数参数描述例子
required 必填 required
minSize 要求字符串长度不大于指定值 minSize[5]
maxSize 要求字符串长度不小于指定值 maxSize[5]
min 必须是数字，并要求不小于指定值 min[5]
max 必须是数字，并要求不大于指定值 max[5]
number 必须是数字 number
integer 必须是整数 integer
regex 正则表单式 regex[^\\S{2,4}$,i]

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

 

推荐阅读