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的不足之处是验证模式单一，验证逻辑比较简单，但对于验证，似乎也没有多少共性的需求了，如果有希望大家能赐教。