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

表单校验一直是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注册。

时间: 2024-08-07 08:40:18

创建通用的表单校验逻辑库的相关文章

开发指南专题九:JEECG微云快速开发平台-表单校验组件ValidForm

开发指南专题九:JEECG微云快速开发平台表单校验组件ValidForm 10.表单校验组件ValidForm 10.1使用入门 1.引入css 请查看下载文件中的style.css,把里面Validform必须部分复制到你的css中(文件里这个注释 "/*==========以下部分是Validform必须的===========*/" 之后的部分是必须的).(之前发现有部分网友把整个style.css都引用在了页面里,然后发现样式冲突了) 2.引入js (jquery 1.4.2

开发指南专题九 JEECG微云快速开发平台-表单校验组件ValidForm

开发指南专题九:JEECG微云快速开发平台表单校验组件ValidForm 10.表单校验组件ValidForm 10.1使用入门 1.引入css 请查看下载文件中的style.css,把里面Validform必须部分复制到你的css中(文件里这个注释 "/*==========以下部分是Validform必须的===========*/" 之后的部分是必须的).(之前发现有部分网友把整个style.css都引用在了页面里,然后发现样式冲突了) 2.引入js (jquery 1.4.2

表单校验

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .wrong{ color: red; } </style> <script src="jquery-1.9.1.js"></script> <

RxAndroid中observable的基本使用和表单校验操作

RxAndroid 响应式编程 类似于监听-观察者模式 在观察者模式中,你的对象需要实现 RxJava 中的两个关键接口:Observable 和 Observer.当 Observable 的状态改变时,所有的订阅它的 Observer 对象都会被通知. 在 Observable 接口的众多方法中,调用 subscribe() 让 Observer 开始订阅该Observable. 从这时起,Observer 接口有三个方法是 Observable 调用时需要的: onNext(T value

vue 表单校验(二)

vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐,因而一直在研究中 表单校验分类 前后端校验 前端校验 后端校验 这种目前一般是结合起来使用,很少单纯前端校验,或者单纯后端校验的 前端检验 数据录入时校验 数据回显时校验 动态创建时校验 数据是否必填时校验 接下来所谈论的校验都是基于前端进行校验,若是后天校验,只是统一校验规则而已,这样前后便可以统

JS——表单校验

1.表单校验步骤: (1)确定事件(submit事件),创建一个函数并和该事件绑定. (2)书写函数对输入的数据是否合法进行校验(需要设定ID并通过ID来获取用户输入的数据的值). (3)输入的信息合法,可以正常提交:不合法的话,不能提交用户信息并给出提示信息. 2.校验函数: (1)非空校验: 通过ID获取值,对是否为空进行校验. var uValue = document.getElementById("user").value; if(uValue==""){

2.12 学习总结 之 表单校验插件validate

一.说在前面 昨天 学习了ajax的相关知识 今天 学习表单校验插件validate, 并使用ajax 自定义校验规则 二.validate 插件 1.网络上有许多成熟的插件共使用者参考,插件就是将jquery实现的常用操作进行封装,封装后的小框架就可以叫做插件,按照插件的语法去操作可以实现很多复杂的功能,而这些复杂功能的背后实现我们可以不必懂. 2.导入插件的步骤: 1) 将jquery的原始文件和插件文件jquery.validate.js导入到工程中 2) 编写js代码对表单进行验证 3.

【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件

Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯.这些特性使JSON成 为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络

利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个性化的需求,使得我们用这些插件的默认机制并不能完成这些功能,所以要根据自己的需要去改造它们(毕竟自己还不到那个写一个完美的校验框架的层次).我用过formValidation这个校验框架,虽然它跟bootstrap配合地很好,但是校验风格太死板,不太满足个性化的场景:后来我找到了jquery.val