文心春萌

厌倦了城市的喧嚣,向往美丽的草原!

« HTML中的数据绑定(Data Binding) 居室中不宜放置的花卉 »

表单检验的超级方便的方法


注意红色标记出来的部分!是不是超直观?

以下是代码片段:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript" SRC="js_check.js"></SCRIPT>
</head>

<body>
<form action="" onSubmit="return pub_valuecheck(this);" method="post">
    数字测试:<input type="text" name="textfield" required="true" message="这里要填数字" datatype="number">
    <br>
    <br>
 长度测试:<textarea name="textfield1" required="true" message="长度不能超过2" maxlength="2"></textarea>
    <br>
    <br>
 正则表达式测试:<input type="text" name="textfield2" required="true" message="email格式不正确" RE="\w+@((\w+[.]?)+)">
    <br>
    <br>
   日期测试(dd/mm/yyyy):<input type="text" name="textfield3" required="true" message="这里要填日期" datatype="date">
    <br>
    <input type="submit" name="Submit" value="Submit">
</form>

<script language="javascript">
function Checkform(){
//其它的检验在这里完成!
 return true;
}
</script>
</body>
</html>


js_check.js

以下是代码:
//js_auto_check  Create by Wayne Deng http://www.waynedeng.com/blog
var errmsg='';
function pub_valuecheck(obj){
 errmsg='';
 prv_validcheck(obj.children);
 if(errmsg.length>1) alert(errmsg);
 return errmsg.length<=1&&Checkform();;
}

function prv_validcheck(obj){
 var message='';
 for (var i=0;i<obj.length;i++){  
  if(obj[i].style.display=='none') continue;
  
  var value='';
  if(obj[i].tagName=='INPUT'||obj[i].tagName=='SELECT'||obj[i].tagName=='CHECKBOX'||obj[i].tagName=='RADIO')
   value=obj[i].value;
  if(obj[i].tagName=='TEXTAREA')
   value=obj[i].innerHTML;
  
  message='';
  if (obj[i].message!=undefined) message=obj[i].message;
  
  if (obj[i].required!=undefined&&obj[i].required=='true'&&value.length==0){
   addmsg(obj[i].caption + ' is required!\n');
  }
  if (obj[i].datatype!=undefined&&value.length>0){
   if (obj[i].datatype=='number'){
     if(!(/^\d+$/.test(value)))
      addmsg (obj[i].caption + ' should be a number!\n');
   }
   if (obj[i].datatype=='date'&&!pub_isDateTime(value)){
    addmsg (obj[i].caption + ' should be a date (dd/mm/yyyy)!\n');
   }
  }
  
  if (obj[i].maxlength!=undefined&&value.length>obj[i].maxlength){
   addmsg(obj[i].caption + ' is to long (' + obj[i].maxlength + ' max)!\n');
  }
  if (obj[i].RE!=undefined&&value.length>0){
   re = new RegExp(obj[i].RE);
   if(!re.test(value))
    addmsg (obj[i].caption + ' format error!\n');
  }
  prv_validcheck(obj[i].children);
 }
 
 function addmsg(msg){
  if (message=='') errmsg=errmsg +msg; else errmsg=errmsg+message+'\n';
 }
}

function pub_isDateTime(chkValue){
 var rn = chkValue.match(/(\d{2})\/(\d{2})\/(\d{4})/);
 if (rn==null) return false;
 var d = new Date(rn[3], rn[2]-1, rn[1]);
 return (d.getFullYear()==rn[3]&&(d.getMonth()+1)==rn[2]&&d.getDate()==rn[1]);
}


完整代码:
js_check.rar

  

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致.

Auto Publisher Copyright Blog.cnxcn.net . All Rights Reserved.