基于自定义属性的Web客户端统一验证JavaScript函数库组件(ChkInputs)概述

来源：互联网发布：linux修改22端口编辑：程序博客网时间：2024/05/18 01:04

一、函数库的结构

二、函数库的配置

三、函数库自定义属性的含义

四、自定义属性的添加

五、常用功能使用介绍

1、即时验证

2、全部验证

3、分组验证

4、指定验证

5、设置自动显示下拉选项

6、预处理所有控件的即时功能

六、其它功能

七、结束语

1、ChkInputs.js：函数库的源文件。

2、ChkInputs.min.js：函数库经瘦身之后的文件，也是实际使用时引用的文件，只须该文件一个即可。

实际使用时，将函数库放到你的系统所指定的文件夹中。如示例所示，放在名称为JS的文件夹下，在<head></head>里加入该文件，写法如下：

二、函数库的配置
函数库提供了不同验证方式的全局配置，都有默认选项，通常使用默认选项即可，当然也可根据自身喜好定制，具体说明如下：

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页面的控件标记中，如下所示(在文本控件中设置了相应属性的内容)：

另一种方式是在后台代码里，为指定控件添加相应的自定义属性，如在.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函数：

然后在需要验证的按钮上添加相应的客户端事件函数：

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>中像下面方式加入代码调用即可。

……

2、全部验证
全部验证即当用户全部输入完毕后点击按钮提交表单时的验证，用法如下

function CheckAll()

{

return verifyAll($("form1"));

}

之后在对应按钮中像下面方式加入代码即可。

这里是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");

}

之后在对应按钮中像下面方式加入代码即可。

……

4、指定验证
指定验证即指定验证某个控件，用法如下：

//指定验证

function CheckSpecifyControl()

{

if(!checkInput(document.getElementById("testInputText1")))

{

CancelClientEvent();

return false;

}

if(!checkInputExceptNullable(document.getElementById("testInputText2")))

{

CancelClientEvent();

return false;

}

之后在对应按钮中像下面方式加入代码。

5、设置即时显示下拉选项
即时显示下拉选项，即showmenu="1"或showmenu="2"；此时，valuerange必须设置，下来选项为valuerange的范围值；当notcheckvaluerange="true"时，指示不检查输入框的值是否在valuerange组合值的范围内。

这里chk_dropmenuclass、chk_dropmenuclass_mouseover、chk_dropmenuclass_mouseout样式属性值必须定义。

自定义属性设置完毕后，只需加入如下代码：

function onLoadFun()

{

showAllSelectMenu($("form1"));//可选择下拉选项

}

之后在<body>中像下面方式加入代码调用即可。

……

风格有可选择可输入或只可选择不可输入两种风格，同时下拉选项会根据输入项内容自动过滤高亮度加粗显示。

6、预处理所有控件的即时功能
即预处理该函数库提供的所有即时功能，包括即时验证、设置自动显示下拉选项等。

只需加入如下代码：

function onLoadFun()

{

loadAllChkInputs($("form1"));

}

之后在<body>中像下面方式加入代码调用即可。

……

六、其它功能
函数库提供了一些通用方法，如$、CancelClientEvent、GetFileSize 、jtrim、isNull、isNumber、isInt、isFloat、strlen等，可将其结合实现自定义的功能。

具体可参见示例代码或源代码文件。

七、结束语
由于时间仓促，加之考虑欠缺及水平所限，不足之处在所难免，有待进一步完善，敬请各位兄弟来信交流(lxchutao@163.com)、批评斧正！Thanks!

附博客地址：

http://blog.csdn.net/chutao

http://lxchutao.blog.163.com

http://hi.baidu.com/lxchutao

QQ空间下载

http://qun.qq.com/air/#60873348/share

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/chutao/archive/2011/02/15/6185562.aspx