当柳上原的风吹向天际的时候...

真正的快乐来源于创造

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  368 Posts :: 1 Stories :: 201 Comments :: 0 Trackbacks

 

 

 

 

 

 

Teambiz中前台表单验证组件FormChecker

 

 

 

 

 

 

 

作者:何杨

撰写日期:2012年2月27日

版本:1.00

更新日期:  

 

 

第一部分:功能说明

对前台页面的表单组件(对于所有用.value能取到值的组件都适用)提供正则表达式验证功能。

第二部分:核心组件

名称

路径

说明

CheckItem

teambiz\WebRoot\page\js\formchecker.js

这个类表示一个页面检查项,参数有表单组件id,当不合法时提示的文字,验证表单组件内容的正则表达式和表征组件是否必填字段。

在页面中增添验证项时常会遇到这个类。

FormChecker

teambiz\WebRoot\page\js\formchecker.js

这个类表示一个前台组件正则表达式验证器。内含一个数组,以容纳多个验证项(CheckItem)

addCheckItem

teambiz\WebRoot\page\js\formchecker.js

FormChecker的数组中增添一个验证项。

在页面中增添验证项时常会遇到这个类。

checkTextBox

teambiz\WebRoot\page\js\formchecker.js

对一个checkItem进行检查,如果它是必填组件,使用正则表达式验证它,并返回验证的结果;如果它不是必填组件,且没有输入内容的话,返回真,否则依然按照正则表单时来验证它。


 

isValid

teambiz\WebRoot\page\js\formchecker.js

FormChecker的数组进行循环并逐个使用checkTextBox函数进行检查,当所有的检查项都符合验证条件后返回真;如果有一个检查项不符合条件,使用alert显示提示文字并将焦点至于该组件上。

用户在提交表单前应该调用这个函数得到表单的验证结果。

 

第三部分:CheckItem和FormChecker两个类的代码

以下代码请参见teambiz\WebRoot\page\js\ formchecker.js中同名函数

/*************************

*

*   Class:CheckItem

*   2009.08.23

**************************/

//-- Contructor

function CheckItem(textboxName,msg,validChar,isRequired){

            this.textboxName=textboxName;

            this.msg=msg;

            this.validChar=validChar;

            this.isRequired=isRequired;

}

 

/*************************

*

*   Class:FormChecker

*   2009.08.23

**************************/

//-- Contructor

function FormChecker(){

            this.checkItemArray=new Array;

}

//-- Add a check Item to array

FormChecker.prototype.addCheckItem=function(textboxName,msg,validChar,isRequired){

            var checkItem=new CheckItem(textboxName,msg,validChar,isRequired);

            this.checkItemArray[this.checkItemArray.length]=checkItem;

};

//-- Check text field in the form

FormChecker.prototype.checkTextBox=function(checkItem){

            var validChar=checkItem.validChar;

            var isRequired=checkItem.isRequired;

            var inputValue=$(checkItem.textboxName).value;

           

            if(isRequired!="true" && inputValue.length<1){

                        return true;

            }

            else{

                        var regexStr="^"+validChar+"$";

                        var regex=new RegExp(regexStr);

                        return regex.test(inputValue);

            }

};

//-- judge the validation of a form

FormChecker.prototype.isValid=function(){

            for(var i=0;i<this.checkItemArray.length;i++){

                        var       toBeCheckedObj=this.checkItemArray[i];

                       

                        var checkResult=this.checkTextBox(toBeCheckedObj);

                       

                        if(checkResult==true){

                                    continue;

                        }

                        else{               

                                    alert(toBeCheckedObj.msg);

                                    $(toBeCheckedObj.textboxName).focus();

                                   

                                    return false;

                        }

            }

            return true;

};

第四部分:使用CheckItem和FormChecker进行验证的代码

以下代码请参考:teambiz\WebRoot\page\jsp\user\register\javascript.jsp

1.初始化FormChecker及添加验证项目

formChecker=new FormChecker();

formChecker.addCheckItem("userName","请输入二到五位汉字的用户名","[\\u4E00-\\u9FA5]{2,5}","true");

formChecker.addCheckItem("userPswd","请输5位以上,最长20位的字母或数字组成的密码","(\\w){5,20}","true");

formChecker.addCheckItem("userPswd2","请输5位以上,最长20位的字母或数字组成的密码","(\\w){5,20}","true");

formChecker.addCheckItem("email","请输入您的电子邮件","\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\.\\w+([-.]\\w+)*","true");

 

2.得到表单的验证结果

function getCheckResult(){

            // 进行页面输入检查

            if(formChecker.isValid()==false){

                        return false;

            }

           

            var userPswd=$("userPswd").value;

            var userPswd2=$("userPswd2").value;

           

            if(userPswd!=userPswd2){

                        $("userPswd2").focus();

                        alert("前后两次密码必须一致.");

                        return false;

            }

           

            return true;

}

以上粗体部分就是得到FormChecker的验证结果。由于FormChecker只能对单个组件的文本内容进行正则表达式校验,无法对对多个组件进行比较,因此如果实际需要其它的验证项,可以在getCheckResult函数中进行添加。

3.注册按钮点击时间后的响应函数:

$("registerBtn").onclick=function(){

            if(getCheckResult()==true){

                        submitForm();

            }

};

 

第五部分:使用步骤

步骤

说明

参照

载入这批函数

teambiz中,这一载入一般放在style.css中。

<script src="page/js/formchecker.js" type="text/javascript"></script>

window_onload函数中初始化表单验证器并增添检查项。

 

formChecker=new FormChecker();

formChecker.addCheckItem("userName","请输入二到五位汉字的用户名","[\\u4E00-\\u9FA5]{2,5}","true");

formChecker.addCheckItem("userPswd","请输5位以上,最长20位的字母或数字组成的密码","(\\w){5,20}","true");

formChecker.addCheckItem("userPswd2","请输5位以上,最长20位的字母或数字组成的密码","(\\w){5,20}","true");

formChecker.addCheckItem("email","请输入您的电子邮件","\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\.\\w+([-.]\\w+)*","true");

使用FormChecker的isValid函数来得到验证结果。

 

function getCheckResult(){

            // 进行页面输入检查

            if(formChecker.isValid()==false){

                        return false;

            }

           

            ……

           

            return true;

}

注册按钮点击时间后的响应函数

 

$("registerBtn").onclick=function(){

            if(getCheckResult()==true){

                        submitForm();

            }

};

 

第六部分:小结

进行表单元素验证是程序员不得不做却又较为乏味的工作之一,FormChecker类能有助于减轻他们的负担,从而使得用正则表达式验证文本内容的工作变得简单,程序员只需要在正则表达式的编写上下些功夫或者求助于网络。

FormChecker的不足之处是验证模式单一,验证逻辑比较简单,但对于验证,似乎也没有多少共性的需求了,如果有希望大家能赐教。

posted on 2012-02-29 10:41 何杨 阅读(364) 评论(0)  编辑  收藏 所属分类: Teambiz

只有注册用户登录后才能发表评论。


网站导航: