作者:环球万维
出处:http://www.web9898.cn

在网页设计中经常需要使用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>
//程序设计 环球万维科技有限公司
//域名:http://www.web9898.cn
//专业提供域名注册,虚拟主机服务

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>