关闭

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

367人阅读 评论(0) 收藏 举报
一、函数库的结构
二、函数库的配置
三、函数库自定义属性的含义
四、自定义属性的添加
五、常用功能使用介绍
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>
 
 
二、函数库的配置
函数库提供了不同验证方式的全局配置,都有默认选项,通常使用默认选项即可,当然也可根据自身喜好定制,具体说明如下:
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">
        //例一,全部验证,比较常用,基本满足一般所有的验证功能
        function CheckInfoAll()
        {
            return verifyAll(document.getElementById("form1"));
        }
</script>
 
       然后在需要验证的按钮上添加相应的客户端事件函数:
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();"> 
<input type="submit" value="验证分组一" onclick="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="指定验证" 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!
附博客地址:
       QQ空间下载

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

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