通用JS验证框架(ChkInputs)概述
通用JS验证框架(ChkInputs)概述
摘要：ChkInputs是一个支持多浏览器，方便，高效率，超轻巧的Web客户端统一验证JavaScript函数库组件。所支持的浏览器包括IE、Firefox、Opera、傲游、腾讯、KylinBrowser、搜狗、世界之窗等各种浏览器。
目录
一、函数库的结构... 2
二、函数库的配置... 2
三、函数库自定义属性的含义... 2
四、自定义属性的添加... 3
五、常用功能使用介绍... 4
1、 即时验证... 4
2、 全部验证... 5
3、 分组验证... 5
4、 指定验证... 6
5、设置即时显示下拉选项... 6
6、预处理所有控件的即时功能... 7
六、其它功能... 7
七、结束语... 7
八、相关下载地址：... 7
一、函数库的结构
1、ChkInputs.js：函数库的源文件。
2、ChkInputs.min.js：函数库经瘦身之后的文件，也是实际使用时引用的文件，只须该文件一个即可。
实际使用时，将函数库放到你的系统所指定的文件夹中。如示例所示，放在名称为JS的文件夹下，在<head></head>里加入该文件，写法如下：
|
<script language="javascript" src="JS/ChkInputs.min.js" ></script> |
二、函数库的配置
函数库提供了不同验证方式的全局配置，都有默认选项，通常使用默认选项即可，当然也可根据自身喜好定制，具体说明如下：
1、m_msgType：提示信息类型( 1：弹出单个提示；2：弹出全部提示(默认选项)；3：页面控件静态显示)。
2、m_MessageId：m_msgType = 3 时用于页面控件静态显示验证信息的控件ID，该控件在页面必须存在否则找不到控件对象无法显示验证信息。
3、m_AttributeFlag：设置自定义属性是否区分大小写标示（0不区分大小写(默认选项)；1区分大小写）。
4、m_TrimFlag：设置验证字符串长度是否包含两边空白部分（0不包含，即过滤两边空白（默认选项）；1包含，即不过滤两边空白)。
5、m_split：设置valuerange组合值的分隔符，默认"|"；可以修改，如m_split="┋"等。
6、m_Alert_Mode：设置提示框(chkAlert)的模式，默认0：alert；也可自定义修改弹出窗口样式(在chkAlert函数中加入)
三、函数库自定义属性的含义
为实现统一验证的需要，函数库为需要进行数据校验的控件自定义了新的不同属性，这些属性除(chinese)外都是可选属性(chinese属性未设置则不验证该控件)，详细含义说明如下：
1、chinese：表示该控件的中文名称，同时标示待验证控件(必设属性,未设置的控件将直接跳过,不予验证)，并在校验出错时显示所用。
2、maxsize：表示允许输入的最大长度，这个长度是以字节为单位计算的；
minsize：表示必须输入的最小长度，这个长度也是以字节为单位计算的。
3、nullable：表示输入值是否允许为空。为no时不允许为空；非no为可空，此时可不配置该属性。
4、datatype：表示输入值的数据类型。数据类型的属性值用户可以根据需要选用。
目前支持：
number： 正整数数字字符串
int：整数数字字符串(可正可负)(integer)
float： 浮点型数字字符串(可正可负)
alphanumeric： 只包含字母和数字的字符串
date： 日期类型(yyyy-MM-dd、yyyy/MM/dd)(comparecurrent："1"小于当前日期；"2"大于当前日期；"3"小于等于当前日期；"4"大于等于当前日期)
datetime： 日期时间类型(yyyy-MM-dd HH:mm:ss、yyyy/MM/dd HH:mm:ss)(comparecurrent："1"小于当前日期时间；"2"大于当前日期时间；"3"小于等于当前日期时间；"4"大于等于当前日期时间)
time： 时间类型(HH:mm:ss)(comparecurrent："1"小于当前时间；"2"大于当前时间；"3"小于等于当前时间；"4"大于等于当前时间)
idcard： 中华人民共和国身份证号码
regular：自定义的验证正则表达式{(regexpression验证正则表达式，notmatchinfo：验证不匹配的提示信息)(配合regular使用，若设置为regular则后两个属性必须设置)}
5、group： 表示分组验证的组别名称，属于哪一组(可选)
group1： 表示另类分组，补充group属性，可选，用于一个控件属于多个组时的验证
group2： 表示另类分组，补充group属性，可选，用于一个控件属于多个组时的验证
group3： 表示另类分组，补充group属性，可选，用于一个控件属于多个组时的验证
group4： 表示另类分组，补充group属性，可选，用于一个控件属于多个组时的验证
group5： 表示另类分组，补充group属性，可选，用于一个控件属于多个组时的验证
6、initialvalue： 设置控件的初始值(可选)
7、maxvalue、minvalue： 设置数值型控件的最大、最小值
notequalmax="true"： 不等于最大值的标示,默认等于
notequalmin="true"： 不等于最小值的标示,默认等于
8、notmatchclass：验证不通过控件的样式名称；若未设置该属性则控件样式保持不变
oldclassname：记录不匹配验证控件的原来的样式名称(配合notmatchclass的使用，不用设置)
9、valuerange： 定义所包含的组合值,分隔符(m_split="|"；如："x|y|z";分割符可以修改，如m_split="┋"等)
notcheckvaluerange="true"：指示不检查valuerange组合值，false或不设置：将检查
10、showmenu：设置显示下拉项菜单(弹出层div显示valuerange设置项)，showmenu="1":下拉选项菜单(可选择)，showmenu="2":下拉项菜单(不可选择)；(可选)
chk_menuclass：弹出层div样式(showmenu有值时必选)
chk_menuclass_mouseover：弹出层div选项鼠标移在上面时的样式(showmenu有值时必选)
chk_menuclass_mouseout：弹出层div选项鼠标移出时的样式(showmenu有值时必选)
须配合valuerange使用
11、ischeckinstant：设置是否使用即时验证功能，"false"不使用，须手动设置；默认使用，不用设置
12、chkminselct：设置checkbox最少选择项(可选)
四、自定义属性的添加
自定义属性的添加非常方便，可以通过两种方式加入，一种方式是直接将自定义属性添加在Web页面的控件标记中，如下所示(在文本控件中设置了相应属性的内容)：
<input name="TextBox1" type="text" id="TextBox1" chinese="测试输入框" maxsize="6" nullable="no" datatype="number" /> |
另一种方式是在后台代码里，为指定控件添加相应的自定义属性，如在.NET(其它环境如Java对比使用)下的.aspx.cs代码里可以加入如下代码：
|
this.TextBox1.Attributes.Add("chinese", "测试输入框");//控件名称 this.TextBox1.Attributes.Add("maxsize", "6");//控件接受的字符长度大小 this.TextBox1.Attributes.Add("nullable", "no");//不可为空，默认可为空 this.TextBox1.Attributes.Add("datatype", "number");//控件数据类型 |
以上的两段代码完成了相同功能，对控件的输入内容增加相应的约束，相比而言，考虑代码的可读性，可采用第二种方式；当然第一种方式好处可在无需编译页面情况下修改生效。当页面的控件元素都设置好时，在前台页面中只需加入少量代码即可，如下所示，先在页面的head区域内定义一个JS函数：
|
<script language="javascript"> |
然后在需要验证的按钮上添加相应的客户端事件函数：
|
OnClientClick="return CheckInfoAll();" |
根据实际需要，也可以使用onfocus，onmousedown，onkeydown，onclick等事件，代码分别如下所示：
onfocus ="rerurn CheckInfoAll();"
onmousedown="rerurn CheckInfoAll ();"
onkeydown="if(event.keyCode == 13){rerurn CheckInfoAll ();}"
onclick="return CheckInfoAll();"
除此之外，我们还可以进行即时验证、全部验证、分组验证、指定验证，详细见下节。
五、常用功能使用介绍
函数库提供了即时验证、全部验证、分组验证、指定验证等各种验证方式，在此仅通过几个代表性的函数例子加以说明。使用情况大致如下所示：
1、 即时验证
即当用户输入完毕后的验证，用法如下：
|
function onLoadFun() { verifyAllOnblur($$("form1")); } |
之后在<body>中像下面方式加入代码调用即可。
|
<body onload="onLoadFun()"> <form id="form1"> …… |
2、 全部验证
全部验证即当用户全部输入完毕后点击按钮提交表单时的验证，用法如下
|
function CheckAll() { return verifyAll($$("form1")); } |
之后在对应按钮中像下面方式加入代码即可。
|
<input type="submit" value="验证所有" onclick="return CheckAll();"> |
这里是submit控件，当然也可以是其他类型如button，也可以是其它事件(如ondblclick)。
另外，全部验证同时提供了剔除不能为空的判断
|
function CheckAllExceptNullable() { return verifyAllExceptNullable($$("form1")); } |
3、 分组验证
分组验证即对页面上的不同输入控件进行分组验证，如这几个属于一组，那几个属于另外一组；或者一个控件同时属于不同分组。一个控件最多可分六组(对于一般系统两组已经满足使用要求)。用法如下：
|
//验证页面所属组group="group0"的元素 function CheckAllGroup0() { return verifyAllByGroup(document.getElementById("form1"),"group0"); }
//验证页面所属组group1="group1"的元素 function CheckAllGroup1() { return verifyAllByGroup1(document.getElementById("form1"),"group1"); }
//验证页面所属组group2="group2"的元素 function CheckAllGroup2() { return verifyAllByGroup2(document.getElementById("form1"),"group2"); }
//验证页面所属组group3="group3"的元素 function CheckAllGroup3() { return verifyAllByGroup3(document.getElementById("form1"),"group3"); }
//验证页面所属组group4="group4"的元素 function CheckAllGroup4() { return verifyAllByGroup4(document.getElementById("form1"),"group4"); }
//验证页面所属组group5="group5"的元素 function CheckAllGroup5() { return verifyAllByGroup5(document.getElementById("form1"),"group5"); } |
之后在对应按钮中像下面方式加入代码即可。
|
<input type="submit" value="验证分组" onclick="return CheckAllGroup0();"> …… |
4、 指定验证
指定验证即指定验证某个控件，用法如下：
|
//指定验证 function CheckSpecifyControl() { if(!checkInput(document.getElementById("testInputText1"))) { CancelClientEvent(); return false; } if(!checkInputExceptNullable(document.getElementById("testInputText2"))) { CancelClientEvent(); return false; } } |
之后在对应按钮中像下面方式加入代码。
|
<input type="submit" value="指定验证" onclick="return CheckSpecifyControl();"> |
5、设置即时显示下拉选项
即时显示下拉选项，即showmenu="1"或showmenu="2"；此时，valuerange必须设置，下来选项为valuerange的范围值；当notcheckvaluerange="true"时，指示不检查输入框的值是否在valuerange组合值的范围内。
这里chk_dropmenuclass、chk_dropmenuclass_mouseover、chk_dropmenuclass_mouseout样式属性值必须定义。
自定义属性设置完毕后，只需加入如下代码：
|
function onLoadFun() { showAllSelectMenu($$("form1"));//可选择下拉选项 } |
之后在<body>中像下面方式加入代码调用即可。
|
<body onload="onLoadFun()"> <form id="form1"> …… |
风格有可选择可输入或只可选择不可输入两种风格，同时下拉选项会根据输入项内容自动过滤高亮度加粗显示。
6、预处理所有控件的即时功能
即预处理该函数库提供的所有即时功能，包括即时验证、设置自动显示下拉选项等。
只需加入如下代码：
|
function onLoadFun() { loadAllChkInputs($$("form1")); } |
之后在<body>中像下面方式加入代码调用即可。
|
<body onload="onLoadFun()"> <form id="form1"> …… |
六、其它功能
函数库提供了一些通用方法，如$$、CancelClientEvent、GetFileSize 、jtrim、isNull、isNumber、isInt、isFloat、strlen等，可将其结合实现自定义的功能。
具体可参见示例代码或源代码文件。
七、结束语
尽管注入了大量心血，但不足之处在所难免，有待进一步完善，敬请来信交流(lxchutao@163.com)、批评斧正！Thanks!
八、相关下载地址：
https://files.cnblogs.com/lxchutao/ChkInputs.rar
http://blog.csdn.net/chutao
http://lxchutao.blog.163.com
http://blog.csdn.net/chutao/archive/2009/08/31/4504485.aspx
