关闭

[置顶] 重构Validator框架

标签: 框架正则表达式strutsdateinputbutton
3135人阅读 评论(4) 收藏 举报
 
重构Validator框架
 
由于之前已经对validataor进行修改,并应用于项目中,随着时间的推移发现了一些问题,故重新对validator进行一次重构。
 
web开发少不了用js来做校验。数据校验是保证软件系统正常运行的重要组成部分,尤其是保证数据的合法性,正确性、完整性、可计算性。Web层处于软件系统的最前端,接受最原始的数据输入。因此,web层的数据校验显得非常重要,是保证数据完整性、正确性、合法性的第一道屏障。 

Validator
框架是国产的一个开源框架。不过,用起来感觉还可以。主要有以下原因: 
1
、代码量很少;
2
、很灵活; 
3
、容易使用;
4
、提供多种错误提示方式。 

但也有以下不足,也是促使对其进行整理的原因。 
1、校验的对象只能是框架已经定义的类型等少量的规则。 
2
、当被校验的对象有多个规则时,提示只能有一个,不够精细。 
3
、不能对一个表单元素对象提供多个校验规则,并且它们之间有依赖关系。
5、弱的联动校验(即同时校验两个对象之间的关系)

数据的完整性、正确性、合法性是通过一组加于数据的规则来保证的。原框架中仅仅将数据类型加于数据,我们知道数据类型只是规则其中的一种,数据不可能只有一种规则。而且规则之间可能有依赖关系,例如查询功能中的输入框中有开始日期和结束日期,业务要求查询范围必须不能大于100天,此例子中结束日期不仅仅是日期类型,而且必须非空和依赖前面的开始日期才能保证正确性。如此,Validator提供dataType属性无法实现此多业务规则。修改后的Validator提供validatorRules属性作为替代,例如:validatorRules="Require,Date,CompareDate",表示非空的、日期类型的、和xx数据比较的。 

另外,提示也是修改的重点。原来的框架中只提供一种提示信息,用属性msg表示。当数据具有多业务规则时候,提示信息只能说的很笼统,不够精细。沿用上面的例子,当用户没有对结束日期输入的时候应该提示用户“结束日期不能为空”;当输入日期格式不对的时候要提示“请输入合法的日期[yyyy-MM-dd]”;当输入超过指定的日期范围是应提示“查询时间范围不能大于100天”。如果三个提示信息合在一起,将影响软件的可交互性。修改后的Validator将规则和对应的提示信息分别设置,如下: 
<td>
结束日期:</td><td><input name="endDate" validatorRules="Date,CompareDate"  msg0="结束日期格式不对" msg1="结束日期要大于开始日期10天。"></td>

重构后的Validator主要有以下变化:
1、    代码更加模块化,原来的许多大函数被拆分成功能清晰的小函数。
2、    原框架的大部分函数和属性作为扩展附件,目的是使得框架更容易学习和单一。
3、    框架主程序专注做自己的事情,扩展框架功能的代码可写在框架代码文件以外以保证主程序的简单可读可维护。
4、    得益于代码的重构,框架增加了对单个表单元素立即校验能力,即可对刚刚输入完毕的对象立即校验。
5、    将撤销和恢复对象校验规则作为框架的基本功能,这个功能非常有用。
6、    提示信息更加人性化,如果程序员没有自定义提示信息,则返回框架定义的规则信息,否则提示找不到提示信息。
7、    框架专门增加一个校验规则类型:自定义函数CFunction,即通过框架调用程序员自定义的js函数来校验。
 
修改后的Validator框架增强了可扩展性,规则可重用性,提示信息的友好性。故将修改后的框架称之为Validator3 
 
最佳实践:
1、   使用 Validator 还是自己写 js脚本
在没有接触Validator框架前,每次js校验都是自己写一些js函数来完成,html中包含了大量的js代码。而且每个函数中有大量的if…else..判断。可重用性和可维护性很差。重构后的Validator3帮我们把基本的事情处理得好好的,那个字段需要什么校验,只要在字段中添加校验规则即可,不需要可立即去掉,就好像配置文件一样。Validator3为你考虑到了更复杂的业务规则情况,当需要联动校验时候可以通过自定义函数来做,具体参考《使用说明》。最后如果参照Validator3来做,可增加代码的重用性和可维护性,同时具有引导性的要求程序员将js代码写到专门的js文件中。
2、    自定义js函数 vs. 添加框架规则
自定义js函数是程序员自己根据特殊的业务规则写的js函数,此类函数的特点是参数2个以上,不是项目通用的业务规则,业务规则复杂。而框架规则js函数则是项目通用的业务规则,参数没有或字段本身。由此可知,什么时候使用自定义js函数和添加框架规则了。
3、    正则表达式 vs. 框架函数
正则表达式和框架函数Validator3统称校验规则。自从我下定决心学习正则表达式后,发现正则表达式是个功能很强大的东东,而且很简练。因此我都是优先考虑正则表达式,再说网上很多,实在不行,就自己写一个(我发现很多同事不会写正则表达式,可能做程序员要学习的东西实在太多的原故)。相比之下,为Validator3添加一个框架函数要繁琐一些。不要忘记函数要返回Boolean值。
4、    提示信息模式1 vs. 模式3
提示风格看个人喜欢了。我们项目组规定查询输入用模式1,即弹出对话框;其他的用模式3
5、    框架默认提示信息 vs. 自定义提示信息
如果为添加校验规则,强烈建议同时添加一个框架默认提示信息,做法参考《使用说明》。自定义提示信息是Validator3为程序员提供的另外一种做法,它能使得提示更加贴切,但自定义提示信息过多会使得html代码更加臃肿。
6、    是替换校验规则还是忽略校验规则
Validator3提供两个有用的接口,分别是replaceRulesignoreRules。如果我们做一个复杂的交互页面,有时候根据用户的操作来屏蔽表单中的某个元素,防止这个元素执行校验规则而使得整个表单不能通过校验。这时候就需要Validator3便利的接口来做屏蔽动作。replaceRules用在页面想重用一个<input>,即用户操作不同则代表不同的含义;而ignoreRules则是表单元素被隐藏了,暂时不做校验,经常和activeRules配对使用。
7、    struts validator
Validatorstruts validator没有什么关系,struts validator也是一个js校验框架,我没有深入用过,所以没法比较。基于我那对struts validator框架的浅显认识,struts validator是通过对页面输出js脚本来校验的,因此必须在服务器端配置校验项。本来想做类似功能的标签,但觉得如果在服务器端配置会增加学习的难度,而且输出大量的动态的js脚本并不是很好看,还不如在html中配置校验项来得直观。

Validator3使用说明
    1
Validator3基本用法概览
<script src="validator.js"></script>
<script src="exvalidator.js"></script>
<table align="center">
        <form name="theForm" id="demo" method="get">
        <tr>
            <td>
                开始日期:
            </td>
            <td>
                <input name="startDate" fieldName="开始日期" validatorRules="Require,Date" msg1="日期不合法">
            </td>
        </tr>
        <tr>
            <td>
                结束日期:
            </td>
            <td>
                <input name="endDate" validatorRules="Require,Date,CFunction" funcList="validateEndDate(startDate,endDate,100)&hi(100)" msg1="结束日期格式不对" msg2="结束日期要大于开始日期3个月。" onblur="Validator.immediateValidate(this);">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input onClick="Validator.validate(document.getElementById('demo'),3)" value="检验模式3" type="button">
                <input onClick="Validator.ignoreRules(theForm.startDate)" value=" 忽略 " type="button">
                <input onClick="Validator.activeRules(theForm.startDate)" value=" 激活 " type="button">
            </td>
        </tr>
        </form>
    </table>
上面代码我们声明了一个表单theForm和两个表单元素,分别是startDateendDate。还有三个按钮,分别是“检验模式3”和“忽略”、“激活”。
 
元素startDate有属性validatorRules="Require,Date",表示此元素被两个校验规则约束,分别是表示“必须的”和“日期类型的”;还有消息属性msg1="日期不合法",此提示对应的是约束Date,排在第二下标为1
 
元素endDate有属性validatorRules="Require,Date,CFunction",这里比startDate多了一个校验规则CFunction,表示此规则调用用户自定义的js函数来校验的,后边必须多出一个属性,例如:
funcList="validateEndDate(startDate,endDate,100)&hi(100)"
funcList里面包含js函数的列表,用&连接。被调用函数的参数可以是表单元素的值(写元素名称即可)也可以是常量。CFunction必须放在最后!原因是为了让Validator3能够正确获取提示信息。由于CFunction是第三个,所以此规则的提示信息下标从2开始,当funcList的第一个函数不通过则提示msg2,如果是第二不通过则提示msg3
 
按钮“检验模式3”被点击时,theForm表单所有元素将被Validator3校验,并按照模式3的方式显示错误信息。共有三种提示模式,代码分别是123
 
按钮“忽略”被点击时,下一次提交时Validator3将忽略对应表单元素的校验规则。
按钮“激活”被点击时,下一次提交时Validator3将将校验表单元素。
立即校验:onblur="Validator.immediateValidate(this);"当表单元素失去输入焦点时候立即对该表单校验,提供此功能的目的是多一种用户体验。
 
Validator3对外提供几个接口,分别是:
 Validator.validate(form,mode):这是主函数,参数是表单对象form和提示信息模式,执行这个函数将对输入的表单所有元素进行校验,如果有一个不通过将返回false并显示错误信息,否则返回true。
Validator.immediateValidate(obj)是校验单个表单元素的接口,参数为表单元素对象。
Validator.ignoreRules(obj )是忽略校验表单元素的接口,参数为表单元素对象。
Validator.activeRules(obj)是激活参数为表单元素对象。
Validator.replaceRlues(obj,rules)是替换表单元素校验规则的接口。obj为表单元素,rules为新的校验规则列表。
 
到这里你已经学会了Validator3的使用。再说一点,Validator3允许你不想使用某个校验规则时,将之删除即可。
 
2、创建框架默认提示信息
创建框架默认提示信息的主要作用是在校验表单元素中可以缺省不再定义提示信息。Validator3如果找不到用户定义的提示信息则使用框架的提示信息。一般在validator.js文件外定义框架提示信息。例如:
Validator.English = /^[A-Za-z]+$/;
Validator.msgEnglish = "英文名只允许英文字母";
默认提示信息作为Validator3的一个属性,以msg+规则名。
3创建规则类型
Validator3中有三类校验规则,分别是正则表达式、框架函数和CFunction
A、创建一个正则表达式规则类型很简单,见上面代码。
 
B、创建一个框架函数校验规则类型有两个步骤:
声明规则类型及其回调的函数,类似下面:
Validator.CompareDate = "this.compareDate(value,getAttribute('days'),document.getElementsByName(getAttribute('to'))[0].value)";
其中,CompareDate 表示规则类型;this表示Validator3的函数,如果没有this则表示任何js函数;value表示表单元素的值;daysto表示自己声明的表单元素某个属性。
实现回调函数,如下:
Validator.compareDate = function(endDate,diff,startDate){
        //...
        return true;
}
最后要注意的一点是:必须返回Boolean值!
 
CCFunction类型是Validator3的一种特殊类型。不需要创建,会用即可。见前面的Validator3基本用法概览。
 
后记:既然是重构,则应该不减少原框架的功能情况下改善代码或增加新的功能。为了测试重构的效果,附件保留了原框架的所有例子,但调试ignoreRules接口的时候有个bug,至今未能定位,但不影响其它功能。如果哪位高人帮忙解决此bug,麻烦告诉我一下,我的常用email:yuyu_xn@yahoo.com.cn,chenfuzhong@gmail.com,39547119@qq.com非常感谢!我的js水平不高(我不是那种对技术能够深入研究的人,即使我有这个心也做不好),第一次修改是为了应用到项目中,当时看不太明白Validator的代码,只能依葫芦画瓢地改。随着时间的推移发现很多问题,首先是框架代码不断的增长,还有一些新的需求。最后非常感谢原作者提供的源代码,因为它使得我们项目中的js校验就像在配置文件中修改配置项一样的快速和灵活。
 
最后,非常高兴能为validator做一点点贡献。源代码和例子在我的资源里可以下载。如果各位在使用过程中有什么问题可以发email给我,我会尽力回复。
                                                                                                                                                     chenfuzhong
                                                                                                                                            2007-10-6 板田和堪村
 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:42184次
    • 积分:559
    • 等级:
    • 排名:千里之外
    • 原创:11篇
    • 转载:0篇
    • 译文:0篇
    • 评论:10条
    最新评论