可灵活定制HTML控件有效性校验项目的JAVASCRIPT对象组件

声明，本JS组件是本人的研究成果，如果你要使用组件或组件中的任何代码，请明确标明出处。

一般而言，要写一个完整的控件有效性检查的JS程序，如checkInput(必输，最小长度，最大长度，内容格式)，在调用时必须把所有的参数一一对应地写完整，而本文介绍的组件中的控件有效性检查就为程序员省去了这样的麻烦。

附加的JS脚本是用于HTML控件有效性检测，可以根据控件需求灵活增加检测项目，如输入文档框，有时我们要检查长度，不能为空，输入的是数字还是EMAIL等等，而每个HTML控件都可能不同，这样就可能造成一个HTML控件一个JS脚本或调用多个方法去实现不同的较检。

本HTML控件有效性检测组件最大的好处就是根据需要，加入相应要校验的变量声名及值即可实现统一的校验调用，增加了编码的灵活性。

用法：在网页（HTML，JSP，PHP，ASPX等）加JS脚本。其中[ ]为可选项：

new  HTMLComponent( ... {id: [, name: 控件名称] [, must: true | false] [, maxLength: 长度] [ ,pattern: 正则表达式][, .....]} )；

/**/ /*----------------------------------
*例子
-------------------------------------*/
/**/ /* 检查ID=v_PERSONNAME控件，其中：
* id: 'v_PERSONNAME',： 控件ID
* must: true：必输(must)为真,
* maxLength: 10： 最大长度为10个字符
* pattern: '^[0-9]{6,8}$'：输入内容的模式，即输入的内容为6个或8个0-9的数字
*{id}
*/
var  htmlComponent  =   new  HTMLComponent( ... {id: 'v_PERSONNAME', must: true, maxLength: 10, pattern: '^[0-9]{6,8}$'} );
htmlComponent.validateCheck(); // 调用

 

一个具体实列如下：

 

< script > ...
//input component validity check.
var componentArr = new Array();

//add to the ckecklist
function addToComponentArray(compnt)...{
    if(notInArr(componentArr,compnt))
        componentArr.push(compnt);
}

function notInArr(arry, value)...{
    for(var i=0; i< arry.length; i++)...{
        if(arry[i] == value)
            return false;
    }
    return true;
}

//check
function checkComponentArray()...{
    var bv = true;
    for(var i=0; i< componentArr.length; i++)...{
        if(!componentArr[i].validateCheck())...{
            bv = false;
        }
    }
    return bv;
}
</ script >


< input  type ='text'  name ='v_username'  id ='v_username'  maxlength ='10'  class ='genInputStyle'  value ='d'  title ='姓名必填。'  onblur ="javascript:checkComponentArray();" >
< SCRIPT  language =JavaScript > ...
addToComponentArray(new EhrComponent(...{id: 'v_username' , must: true, maxLength: 10}));
</ SCRIPT >

< div  class ='genNoticeStyle'  id ='checkv_PERSONNAME' > &nbsp; < img  src ='images/icon_help.gif'  title ='姓名必填。' >   </ div >

 

JS脚本下载：

 http://download1.youkuaiyun.com/down3/20070525/25153030759.js