本文详细介绍了一个前端表单验证库的使用方法，包括函数库结构、配置、自定义属性含义及其添加方式，并介绍了即时验证、全部验证等多种验证功能。
一、函数库的结构
二、函数库的配置
三、函数库自定义属性的含义
四、自定义属性的添加
五、常用功能使用介绍
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>
或
<script type="text/javascript" src="JS/ChkInputs.min.js" ></script>
或
<script type="text/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属性未设置则不验证该控件)，详细含义说明如下：
为实现统一验证的需要，函数库为需要进行数据校验的控件自定义了新的不同属性，这些属性除(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页面的控件标记中，如下所示(在文本控件中设置了相应属性的内容)：
自定义属性的添加非常方便，可以通过两种方式加入，一种方式是直接将自定义属性添加在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">
//例一，全部验证，比较常用,基本满足一般所有的验证功能
function CheckInfoAll()
{
return verifyAll(document.getElementById("form1"));
}
</script>
//例一，全部验证，比较常用,基本满足一般所有的验证功能
function CheckInfoAll()
{
return verifyAll(document.getElementById("form1"));
}
</script>
然后在需要验证的按钮上添加相应的客户端事件函数：
OnClientClick="return CheckInfoAll();"
根据实际需要，也可以使用onfocus，onmousedown，onkeydown，onclick等事件，代码分别如下所示：
onfocus ="rerurn CheckInfoAll();"
οnmοusedοwn="rerurn CheckInfoAll ();"
οnkeydοwn="if(event.keyCode == 13){rerurn CheckInfoAll ();}"
οnclick="return CheckInfoAll();"
除此之外，我们还可以进行即时验证、全部验证、分组验证、指定验证，详细见下节。
五、常用功能使用介绍
函数库提供了即时验证、全部验证、分组验证、指定验证等各种验证方式，在此仅通过几个代表性的函数例子加以说明。使用情况大致如下所示：
函数库提供了即时验证、全部验证、分组验证、指定验证等各种验证方式，在此仅通过几个代表性的函数例子加以说明。使用情况大致如下所示：
1、 即时验证
即当用户输入完毕后的验证，用法如下：
即当用户输入完毕后的验证，用法如下：
function onLoadFun()
{
verifyAllOnblur($("form1"));
}
之后在<body>中像下面方式加入代码调用即可。
<body οnlοad="onLoadFun()">
<form id="form1">
……
2、 全部验证
全部验证即当用户全部输入完毕后点击按钮提交表单时的验证，用法如下
全部验证即当用户全部输入完毕后点击按钮提交表单时的验证，用法如下
function CheckAll()
{
return verifyAll($("form1"));
}
之后在对应按钮中像下面方式加入代码即可。
<input type="submit" value="验证所有" οnclick="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="验证分组" οnclick="return CheckAllGroup0();">
<input type="submit" value="验证分组一" οnclick="return CheckAllGroup1();">
<input type="submit" value="验证分组一" οnclick="return CheckAllGroup1();">
……
4、 指定验证
指定验证即指定验证某个控件，用法如下：
指定验证即指定验证某个控件，用法如下：
//指定验证
function CheckSpecifyControl()
{
if(!checkInput(document.getElementById("testInputText1")))
{
CancelClientEvent();
return false;
}
if(!checkInputExceptNullable(document.getElementById("testInputText2")))
{
CancelClientEvent();
return false;
}
}
之后在对应按钮中像下面方式加入代码。
<input type="submit" value="指定验证" οnclick="return CheckSpecifyControl();">
5、设置即时显示下拉选项
即时显示下拉选项，即showmenu="1"或showmenu="2"；此时，valuerange必须设置，下来选项为valuerange的范围值；当notcheckvaluerange="true"时，指示不检查输入框的值是否在valuerange组合值的范围内。
即时显示下拉选项，即showmenu="1"或showmenu="2"；此时，valuerange必须设置，下来选项为valuerange的范围值；当notcheckvaluerange="true"时，指示不检查输入框的值是否在valuerange组合值的范围内。
这里chk_dropmenuclass、chk_dropmenuclass_mouseover、chk_dropmenuclass_mouseout样式属性值必须定义。
自定义属性设置完毕后，只需加入如下代码：
function onLoadFun()
{
showAllSelectMenu($("form1"));//可选择下拉选项
}
之后在<body>中像下面方式加入代码调用即可。
<body οnlοad="onLoadFun()">
<form id="form1">
……
风格有可选择可输入或只可选择不可输入两种风格，同时下拉选项会根据输入项内容自动过滤高亮度加粗显示。
6、预处理所有控件的即时功能
即预处理该函数库提供的所有即时功能，包括即时验证、设置自动显示下拉选项等。
即预处理该函数库提供的所有即时功能，包括即时验证、设置自动显示下拉选项等。
只需加入如下代码：
function onLoadFun()
{
loadAllChkInputs($("form1"));
}
之后在<body>中像下面方式加入代码调用即可。
<body οnlοad="onLoadFun()">
<form id="form1">
……
六、其它功能
函数库提供了一些通用方法，如$、CancelClientEvent、GetFileSize 、jtrim、isNull、isNumber、isInt、isFloat、strlen等，可将其结合实现自定义的功能。
函数库提供了一些通用方法，如$、CancelClientEvent、GetFileSize 、jtrim、isNull、isNumber、isInt、isFloat、strlen等，可将其结合实现自定义的功能。
具体可参见示例代码或源代码文件。
七、结束语
由于时间仓促，加之考虑欠缺及水平所限，不足之处在所难免，有待进一步完善，敬请各位兄弟来信交流( lxchutao@163.com)、批评斧正！Thanks!
由于时间仓促，加之考虑欠缺及水平所限，不足之处在所难免，有待进一步完善，敬请各位兄弟来信交流( lxchutao@163.com)、批评斧正！Thanks!
附博客地址：
QQ空间下载
本文来自优快云博客，转载请标明出处： http://blog.youkuaiyun.com/chutao/archive/2011/02/15/6185562.aspx
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
