一个通用的表单验证程序

一个通用的表单验证程序

- 站长中国 (http://www.zzchina.net)
-- 技术教程 (http://www.zzchina.net/article/)
--- 一个通用的表单验证程序 (http://www.zzchina.net/article/28/27526.htm)

-- 作者：王先炼
-- 发布日期： 2006-04-12

在网页设计中经常需要使用javascript验证客户端用户的输入,但很多时候验证的过程又大同小异,十分繁锁,其实可以利用javascript的一些特性,使表单验证变得更轻松.
下边将列出一个基本通用的表单验证程序(现在这个只适合<input>、<textarea>、<select>等含有value属性的元素的验证,不过如果您需要,按此思路添加一些特性就可以了)

我们的通用验证程序需要为表单中的元素定义如下几个属性:
一、checkstr
表示该表单的模式,使用正则表达试
二、
info 当该表单不合法时的提示信息
三、func
当某个表单的值没办法用简单的正则表达式来验证的时候,可以为其单独定义一个验证函数实现复杂的验证过程
四、checkbox_select
该属性定义了某个复选框必须被选择

通过以上几个简单的属性,就可以使网页表单的验证变得轻松了.
比如有以下表单,需要验证其邮编格式,则只需要为元素zip添加两个属性就行了:
checkstr="\d{6}"
info="请您输入合法的邮编"

这样,不管有多少表单元素需要验证,您都不需要写程序,只需要简单的为每个需要验证的元素添加checkstr与info属性就可以了.

例(验证邮政编码):

<form name=form1 method=post onsubmit="return check(this);">
请输入合法的邮编:
<input type=text name=zip size=6 checkstr="\d{6}" info="请您输入合法的邮编">
<input type=submit name=okay value=okay>
</form>
<! ------------------------------------------------------------------------------- -->

<script language=javascript>
function check_form(form){
for (e_item=0;e_item<form.elements.length;e_item++){
form_element=form.elements[e_item];
if (defined(form_element.checkstr)&&defined(form_element.info)){
Content=form_element.value;
regPattern=form_element.checkstr;
message=form_element.info;
if (!regCheck(regPattern,Content)){
alert(message);
form_element.focus();
form_element.select();
return false;
}
}
if (defined(form_element.checkbox_select)&&defined(form_element.info)){
if (!form_element.checked){
alert(form_element.info);
return false;
}

}

if (defined(form_element.func)){
try{
eval("runCode="+form_element.func);
if (!runCode) return false;
}catch(e){
alert('错误:关于'+form_element.name+'的函数'+form_element.func+'未定义');
}
}

} //for
return true;
}

function regCheck(patternStr,inputStr){
patternStr="^"+patternStr+"$";
re=new RegExp(patternStr,"i");
return re.test(inputStr);
}

function defined(control){
return (typeof(control)!="undefined")
}

</script>

zzchina.net