文心春萌

厌倦了城市的喧嚣，向往美丽的草原！

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

2006-12-23 22:24:13

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


  

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

以下是代码片段：
<!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

Tags: 网摘  
发布:文心春萌 | 分类:网络文摘 | 评论:0 | 引用:0 | 浏览:
  

发表评论:

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

日历

最新评论及回复

最近发表

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

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