[转载]表单检验的超级方便的方法
信息来源：Wayne_Deng的专栏受coldfusion的影响，想出了这样一个检验表单的方法：
注意红色标记出来的部分！是不是超直观？完整代码在这里下载js_check.rar
以下是代码片段：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[url]http://www.w3.org/TR/html4/loose.dtd[/url]">
<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 [url]http://www.waynedeng.com/blog[/url]
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不够精简。 我这边有个更精典的js共享出来一下. [code]
//=====================.net客户段验证2.0===========================
//
//
// '''
// (0 0)
// +-----oOO----(_)------------+
// | |
// | 作者:高处不胜寒 |
// | QQ:28767360 |
// | |
// +------------------oOO------+
// |__|__|
// || ||
// ooO Ooo
//===========================================================
function ck(http)
{
var IP="[url]http://wufeng/bzgl/[/url]"+http;
window.top.main.location.href=IP;
dh('Home','Operation','Stock','Storage','Report','Sys','Help');
}
function fob(n, d)
{
var p,i,x;if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);
}
if(!(x=d[n])&&d.all)
x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=fob(n,d.layers[i].document);
return x;
}
function cb()
{
var a=cb.arguments;
var name=fob(a[0]);
e=document.forms(0).elements;
if (name.checked==true)
{
for (i=0;i<e.length;i++)
{
e[i].checked=true;
}
}
else
{
for (i=0;i<e.length;i++)
{
e[i].checked=false;
}
}
}
function vdf()
{
var i,j,name,value,message,length,type,a=vdf.arguments,cb_name;
for (i=0; i<(a.length-2); i+=3)
{
if (a[i].indexOf('#')!=-1)
{
name=fob(a[i].substr(0,a[i].indexOf('#')));
cb_name=fob(a[i].substr((a[i].indexOf('#')+1),a[i].length));
}
else
{
name=fob(a[i]); // 控件名称
}
message=a[i+1]; // 提示信息
type=a[i+2]; // 类型
if (type!="r_time")
{
value=name.value.replace(/ +/g, ""); // 控件值
}
else
{
value=name.value;
}
if (name)
{
// ===============判断复选框是否选中================ //
if (type=="r_cb")
{
e=document.forms(0).elements;
var flag=false;
for (i=0;i<e.length;i++)
{
if (e[i]!=cb_name)
{
if (e[i].checked==true)
{
flag=true;
break;
}
}
if (i==e.length-1)
{
break;
}
}
if (flag==false)
{
alert(message+"!\n"); //为空时出现的提示
return false;
}
}
// ===============判断下拉框是否选择================ //
if (type=="r_sl")
{
if (name.selected==false)
{
alert(message+"!\n"); //为空时出现的提示
return false;
}
}
// ===============不能为空的判断================ //
if (type=="r")
{
if (value=="") // 判断是否为空
{
alert(message+"!\n"); //为空时出现的提示
name.focus();
name.select();
return false;
}
}
// ===============不能为空的判断,但不获得焦点================ //
if (type=="o_r")
{
if (value=="") // 判断是否为空
{
alert(message+"!\n"); //为空时出现的提示
return false;
}
}
// ===============只能输入中文================ //
if (type=="r_china")
{
if (value.search(/^[\u4e00-\u9fa5]+$/)==-1)
{
alert(message+"!\n"); // 判断不能为空
name.focus();
name.select();
return false;
}
}
// ===============不能为空,必须是数字或者字符判断================ //
if (type=="r_num_char")
{
if (value=="")
{
alert(message+"!\n"); //为空时出现的提示
name.focus();
name.select();
return false;
}
if (value.search(/^[0-9a-zA-Z]+$/)==-1)
{
alert(message+"!\n"); //为空时出现的提示
name.focus();
name.select();
return false;
}
}
// ===============可以为空，不为空时，填数字================ //
if (type=="num")
{
if (value.search(/^[0-9]+$/)==-1 && value!="")
{
alert(message+"!\n"); // 判断不能为空
name.focus();
name.select();
return false;
}
}
// ===============不能为空,必须是数字判断================ //
if (type=="r_num")
{
if (value=="")
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
if (value.search(/^[0-9]+$/)==-1)
{
alert(message+"!\n"); // 判断不能为空
name.focus();
name.select();
return false;
}
}
// ===============必须输入小于n的数字================ //
if (type.indexOf("r_num<")!=-1)
{
length=type.substring((type.indexOf('<')+1),type.length); // 获得rn<后面的数
if (value=="") // 为空做的提示
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
if (value.search(/^[0-9]+$/)==-1) // 不是数字做的提示
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
if (value.length>length) // 限制数字长度做的限制
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
}
// ===============必须输入大于n的数字================ //
if (type.indexOf("r_num>")!=-1)
{
length=type.substring((type.indexOf('>')+1),type.length); // 获得rn<后面的数
if (value=="") // 为空做的提示
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
if (value.search(/^[0-9]+$/)==-1) // 不是数字做的提示
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
if (value.length<length) // 限制数字长度做的限制
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
}
// ===============必须输入a-b位之间的数字================ //
if (type.indexOf("r_num#<>")!=-1)
{
length=type.substr((type.indexOf('>')+1),type.length);
length=length.substr(0,length.lastIndexOf("-"));
length1=type.substring((type.indexOf('-')+1),type.length) // 获得rn<后面的数
if (value=="") // 为空做的提示
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
if (value.search(/^[0-9]+$/)==-1) // 不是数字做的提示
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
if (value.length<length || value.length>length1) // 限制数字长度做的限制
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
}
// ===============不能为空,必须是float类型================ //
if (type=="r_float")
{
if (value=="")
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
if (value.search(/^[0-9]+$/)!=-1 || value.search(/^([0-9]+)|([0-9]+\.[0-9]*)|([0-9]*\.[0-9]+)$/)!=-1)
{
return true;
}
else
{
alert(message+"!\n"); // 判断不能为空
name.focus();
name.select();
return false;
}
}
// ===============判断email,不一定输入================ //
if (type.indexOf("email")!=-1)
{
if (name.value!="")
{
if (value.search(/^[_\.a-z0-9]+@[a-z0-9]+[\.][a-z0-9]{2,}$/i)==-1)
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
}
}
// ===============判断email,一定输入================ //
if (type.indexOf("r_email")!=-1)
{
if (name.value=="")
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
if (value.search(/^[_\.a-z0-9]+@[a-z0-9]+[\.][a-z0-9]{2,}$/i)==-1)
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
}
// ===============判断日期,比如2000-12-20================ //
if (type=="r_date")
{
flag=true;
getdate=value;
if (getdate.search(/^[0-9]{4}-(0[1-9]|[1-9]|1[0-2])-((0[1-9]|[1-9])|1[0-9]|2[0-9]|3[0-1])$/)==-1) // 判断输入格式时候正确
{
flag=false;
}
else
{
var year=getdate.substr(0,getdate.indexOf('-')) // 获得年
// 下面操作获得月份
var transition_month=getdate.substr(0,getdate.lastIndexOf('-'));
var month=transition_month.substr(transition_month.lastIndexOf('-')+1,transition_month.length);
if (month.indexOf('0')==0)
{
month=month.substr(1,month.length);
}
// 下面操作获得日期
var day=getdate.substr(getdate.lastIndexOf('-')+1,getdate.length);
if (day.indexOf('0')==0)
{
day=day.substr(1,day.length);
}
//alert(month);
//alert(day)
//return false;
if ((month==4 || month==6 || month==9 || month==11) && (day>30)) // 4,6,9,11月份日期不能超过30
{
flag=false;
}
if (month==2) // 判断2月份
{
if (LeapYear(year))
{
if (day>29 || day<1){ flag=false; }
}
else
{
if (day>28 || day<1){flag=false; }
}
}
else
{
flag=true;
}
}
if (flag==false)
{
alert(message+"!\n"); //为空时出现的提示
name.focus();
name.select();
return false;
}
}
// ===============判断日期,比如2000-12-20================ //
if (type=="r_time")
{
flag=true;
getdate=value;
if (getdate.search(/^[0-9]{4}-(0[1-9]|[1-9]|1[0-2])-((0[1-9]|[1-9])|1[0-9]|2[0-9]|3[0-1]) ((0[1-9]|[1-9])|1[0-9]|2[0-4]):((0[1-9]|[1-9])|[1-5][0-9]):((0[1-9]|[1-9])|[1-5][0-9])$/)==-1) // 判断输入格式时候正确
{
flag=false;
}
else
{
var year=getdate.substr(0,getdate.indexOf('-')) // 获得年
// 下面操作获得月份
var transition_month=getdate.substr(0,getdate.lastIndexOf('-'));
var month=transition_month.substr(transition_month.lastIndexOf('-')+1,transition_month.length);
if (month.indexOf('0')==0)
{
month=month.substr(1,month.length);
}
// 下面操作获得日期
var day=getdate.substr(getdate.lastIndexOf('-')+1,getdate.length);
if (day.indexOf('0')==0)
{
day=day.substr(1,day.length);
}
if ((month==4 || month==6 || month==9 || month==11) && (day>30)) // 4,6,9,11月份日期不能超过30
{
flag=false;
}
if (month==2) // 判断2月份
{
if (LeapYear(year))
{
if (day>29 || day<1){ flag=false; }
}
else
{
if (day>28 || day<1){flag=false; }
}
}
else
{
flag=true;
}
}
if (flag==false)
{
alert(message+"!\n"); //为空时出现的提示
name.focus();
name.select();
return false;
}
}
//判断是否闰年
//参数 intYear 代表年份的值
//return true: 是闰年 false: 不是闰年
function LeapYear(intYear) {
if (intYear % 100 == 0)
{
if (intYear % 400 == 0) { return true; }
}
else {
if ((intYear % 4) == 0) { return true; }
}
return false;
}
// ===============判断电话，可以为空================ //
if (type.indexOf("tel")!=-1)
{
if (name.value!="")
{
if (value.search(/^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{8}$/)==-1 && value.search(/^(\([0-9]{4}\)|[0-9]{4}-)[0-9]{7}$/)==-1)
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
}
}
// ===============判断电话，不能为空================ //
if (type.indexOf("r_tel")!=-1)
{
if (name.value=="")
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
if (value.search(/^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{8}$/)==-1 && value.search(/^(\([0-9]{4}\)|[0-9]{4}-)[0-9]{7}$/)==-1)
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
}
// ===============判断手机，可以为空================ //
if (type.indexOf("mod")!=-1)
{
if (name.value!="")
{
if (value.search(/^[0-9]{11}$/)==-1)
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
}
}
// ===============判断手机，不能为空================ //
if (type.indexOf("r_mod")!=-1)
{
if (name.value=="")
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
if (value.search(/^[0-9]{11}$/)==-1)
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
}
// ===============判断街道================ //
if (type.indexOf("city")!=-1)
{
if (name.value!="")
{
if (value.search(/^.{1,}(市|镇|乡).{1,}(路|街|道).{1,}号.{0,}$/)==-1)
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
}
}
// ===============判断街道，不能为空================ //
if (type.indexOf("r_city")!=-1)
{
if (name.value=="")
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
if (value.search(/^.{1,}(市|镇|乡).{1,}(路|街|道).{1,}号.{0,}$/)==-1)
{
alert(message+"!\n");
name.focus();
name.select();
return false;
}
}
}
}
}
// ------------------本系统函数--------------------
function dh()
{
var a=dh.arguments;
var i;
for (i=0;i<a.length;i++)
{
eval("window.top.nav.document."+a[i]+ ".src='Images/Top/btn_"+a[i]+".jpg'");
}
}
// ＝＝＝颜色＝＝＝
var main_tr_onmouseover="#E4EFFC"; // 主题main的tr鼠标移动onmouseover上来时的颜色
// ＝＝＝打印功能＝＝＝
var gLoadFinished = true; // 检测页面加载标记
var gDataGridName = "id"; // 要打印的内容的名称
var Title="s";
// 打开JustPrint(TM) 打印服务窗口
function OpenJustPrintDlg()
{
window.open('JustPrintService.aspx','_blank',"left=0,top=0,width=520,height=350,status=yes,resizable=no,directories=no,location=no,menubar=no,scrollbars=no,titlebar=no,toolbar=no");
}
[/code] 用法:
[code]
<input type="submit" name="Submit4" value="提交" onclick="return vdf('uname','请正确输入您的姓名','r_china','tel','请正确输入您的电话','r_num_char','address','请正确输入您的联系地址','r','postnum','请正确输入邮编','')">
[/code]
页:
[1]