本文详细介绍了一个名为ChkInputs.js的JavaScript验证组件，该组件支持多种验证方式，包括即时验证、全部验证、分组验证和指定验证等，并提供了丰富的自定义属性和配置选项。
一、函数库的结构
二、函数库的配置
三、函数库自定义属性的含义
四、自定义属性的添加
五、常用功能使用介绍
1、 即时验证
2、 全部验证
3、 分组验证
4、 指定验证
5、设置自动显示下拉选项
6、预处理所有控件的即时功能
六、其它功能
七、结束语
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：表示允许输入的最大长度，这个长度是以字节为单位计算的。
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"不使用，须手动设置；默认使用，不用设置
自定义属性的添加非常方便，可以通过两种方式加入，一种方式是直接将自定义属性添加在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();"
除此之外，我们还可以进行即时验证、全部验证、分组验证、指定验证，详细见下节。
函数库提供了即时验证、全部验证、分组验证、指定验证等各种验证方式，在此仅通过几个代表性的函数例子加以说明。使用情况大致如下所示：
即当用户输入完毕后的验证，用法如下：
| function onLoadFun() { verifyAllOnblur($("form1")); } |
之后在<body>中像下面方式加入代码调用即可。
| <body onload="onLoadFun()"> <form id="form1"> …… |
全部验证即当用户全部输入完毕后点击按钮提交表单时的验证，用法如下
| function CheckAll() { return verifyAll($("form1")); } |
之后在对应按钮中像下面方式加入代码即可。
| <input type="submit" value="验证所有" onclick="return CheckAll();"> |
这里是submit控件，当然也可以是其他类型如button，也可以是其它事件(如ondblclick)。
另外，全部验证同时提供了剔除不能为空的判断
| function CheckAllExceptNullable() { return verifyAllExceptNullable($("form1")); } |
分组验证即对页面上的不同输入控件进行分组验证，如这几个属于一组，那几个属于另外一组；或者一个控件同时属于不同分组。一个控件最多可分六组(对于一般系统两组已经满足使用要求)。用法如下：
| //验证页面所属组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();"> …… |
指定验证即指定验证某个控件，用法如下：
| //指定验证 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!
附博客地址：
http://blog.youkuaiyun.com/chutao
http://lxchutao.blog.163.com
QQ空间下载
http://qun.qq.com/air/#60873348/share
该组件已开源，开源地址：
ChkInputs.js首页、文档和下载 - JavaScript 验证组件 - 开源中国社区
http://www.oschina.net/p/chkinputs
lxchutao / ChkInputs - 代码托管 - 开源中国社区
http://git.oschina.net/lxchutao/ChkInputs
欢迎使用
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
