通用的表单检查Javascript脚本的步骤
通用的表单检查Javascript脚本的步骤
关键字:javascript 表单检查 自定义属性 正则表达式
部分代码参考了一位兄弟的代码，但没记住名字，十分抱歉，如果这位兄弟看到本文，请与我联系!!!
回回写表单,回回要写不同的检查JS,很麻烦,后来写了通用的检查函数,很粗糙,但比较实用,以后再好好改改:
包含页: CheckForm.js
代码如下:
//************************************************
//规则检查排序
function RegCheck(objs)
{
var str = objs.checktype;
switch (str)
{
case "cn" : //要检查的表单控件的输入类型必须为中文
return CnWordRegCheck(objs);
break;
case "idnum" :
return IdCardRegCheck(objs);//要检查的表单控件的输入类型必须为身份证号
break;
case "num" : //要检查的表单控件的输入类型必须为数字
return NumRegCheck(objs);
break;
case "mail" : //要检查的表单控件的输入类型必须为EMAIL
return EmailRegCheck(objs);
break;
case "txt" ://要检查的表单控件的输入类型必须为字符串
return SpecialWordRegCheck(objs);
break;
case "notes" :
return true;//要检查的表单控件的输入类型必须为什么都可以
break;
}
}
//************************************************
//检查电话号码
function NumRegCheck(obj)
{
var uplimit = obj.checkrule.split(",")[0];
var downlimit = obj.checkrule.split(",")[1];
var reg = "";
if (downlimit == null)
{
reg = eval("/^[0-9]{"+uplimit+"}$/");
}
else
{
reg = eval("/^[0-9]{"+uplimit+","+downlimit+"}$/");
}
var str = obj.value;
var flag = reg.test(str);
return flag;
}
//************************************************
//检查身份证号
function IdCardRegCheck(obj)
{
var str = obj.value;
var reg = /^([0-9]{15}|[0-9]{18})$/;
var flag = reg.test(str);
return flag;
}
//************************************************
//检查EMAIL
function EmailRegCheck(obj)
{
var str = obj.value;
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((/.[a-zA-Z0-9_-]{2,3}){1,2})$/;
var flag = reg.test(str);
return flag;
}
//***************************************
//检查中文输入
function CnWordRegCheck(obj)
{
var str = obj.value;
var reg=/^[/u4e00-/u9fa5](/s*[/u4e00-/u9fa5])*$/;
var flag = reg.test(str);
//alert(flag);
return flag;
}
//***************************************
//检查特殊字符
function SpecialWordRegCheck(obj)
{
var reg= /[(//)(//)(')(")(<)(>)]/g;
var str = obj.value;
var flag= reg.test(str);
flag = !flag;
return flag;
}
//************************************************
//检查主引导函数
function CheckForm(obj)
{
var myform = eval("document."+obj.name);
for (i=0;i<myform.elements.length;i++)
{
var formvalue = myform.elements[i].value;
//内容非空检查,长度检查
if ((myform.elements[i].value == "")||(myform.elements[i].value.length>myform.elements[i].maxlength))
{
alert("您忘了填写"+myform.elements[i].cnname+"!"+"或者您填写的信息不符合规范!");
myform.elements[i].focus();
return false;
break;
}
if (myform.elements[i].value == 0)
{
alert("您忘了选择"+myform.elements[i].cnname+"!");
myform.elements[i].focus();
return false;
break;
}
//数据规范化检查
var myobj = myform.elements[i];
//alert(myobj.checktype);
//break;
if (!RegCheck(myobj))
{
alert(myobj.cnname+"输入有误,请按填写要求填写!");
myobj.focus();
return false;
break;
}
}
}
****************************************************
测试用DEMO页面 CheckFormDemo.htm
代码如下:(要注意的是,要正确使用以上函数,在表单控件里要自定义几个属性:
checktype=“该表单控件要检查的类型,如果要求该控件必须输入中文,则为 'cn',等等“;
checkrule=“要检查的范围,如身份证号,要15-18位,则写入 '15,18' 为一个则直接写入,两个则要用逗号分隔“
cnname=“该控件的中文name,比如'姓名' '学历'等“
主要为以上三个自定义属性。
<html>
<head>
<title>System</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript" src="checkform.js"></script>
</head>
<body>
<table width="780" border="0" cellpadding="0" cellspacing="0" class="table-border-color-allgray">
<tr>
<td height="4" class="table-bgcolor-headandfoot"></td>
</tr>
<tr>
<td height="1"></td>
</tr>
<tr>
<td height="45" class="table-bgcolor-title"> <div align="right"> </div></td>
</tr>
<tr>
<td height="1" class="table-bgcolor-line"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="input_form">
<tr>
<td align="center">
<form action="test.asp" method="post" name="frm_pinfo" target="_self" id="frm_pinfo" onSubmit="return CheckForm(this);">
<table width="90%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15%" height="30"> </td>
<td width="50%"> </td>
<td width="35%"> </td>
</tr>
<tr>
<td height="30" colspan="3"> </td>
</tr>
<tr>
<td height="30"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="30">姓 名:</td>
<td><input name="pname" type="text" class="form-input-border" id="pname" maxlength="12" checktype="cn" cnname="姓名">
*必须填写中文</td>
<td> </td>
</tr>
<tr>
<td height="30">性 别:</td>
<td><select cnname="性别" name="psex" size="1" checktype="notes" class="form-input-border" id="psex">
<option value="0" selected>---请选择---</option>
<option value="男">男 </option>
<option value="女">女 </option>
</select></td>
<td> </td>
</tr>
<tr>
<td height="30">出生年月:</td>
<td><select name="pbyear" size="1" class="form-input-border" id="pbyear" checktype="notes" cnname="出生年份">
<option value="0" selected>-请选择-</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>
年
<select name="pbmonth" size="1" class="form-input-border" id="pbmonth" checktype="notes" cnname="出生月份">
<option value="0" selected>-请选择-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
月 </td>
<td> </td>
</tr>
<tr>
<td height="30">现居住地:</td>
<td><select name="pprovince" size="1" class="form-input-border" id="pprovince" checktype="notes" cnname="现居住地">
<option value="0" selected>---请选择---</option>
<option value="北京">北京</option>
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="海南">海南</option>
<option value="福建">福建</option>
<option value="天津">天津</option>
<option value="湖南">湖南</option>
<option value="湖北">湖北</option>
<option value="河南">河南</option>
<option value="河北">河北</option>
<option value="山东">山东</option>
<option value="山西">山西</option>
<option value="黑龙江">黑龙江</option>
<option value="辽宁">辽宁</option>
<option value="上海">上海</option>
<option value="甘肃">甘肃</option>
<option value="青海">青海</option>
<option value="新疆">新疆</option>
<option value="西藏">西藏</option>
<option value="宁夏">宁夏</option>
<option value="四川">四川</option>
<option value="云南">云南</option>
<option value="吉林">吉林</option>
<option value="内蒙古">内蒙古</option>
<option value="陕西">陕西</option>
<option value="安徽">安徽</option>
<option value="贵州">贵州</option>
<option value="江苏">江苏</option>
<option value="重庆">重庆</option>
<option value="浙江">浙江</option>
<option value="江西">江西</option>
<option value="国外">国外</option>
<option value="台湾">台湾</option>
<option value="香港">香港</option>
<option value="澳门">澳门</option>
</select></td>
<td> </td>
</tr>
<tr>
<td height="30">户口所在地:</td>
<td><select name="prpr" size="1" class="form-input-border" id="select2" checktype="notes" cnname="户口所在地">
<option value="0" selected>---请选择---</option>
<option value="北京">北京</option>
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="海南">海南</option>
<option value="福建">福建</option>
<option value="天津">天津</option>
<option value="湖南">湖南</option>
<option value="湖北">湖北</option>
<option value="河南">河南</option>
<option value="河北">河北</option>
<option value="山东">山东</option>
<option value="山西">山西</option>
<option value="黑龙江">黑龙江</option>
<option value="辽宁">辽宁</option>
<option value="上海">上海</option>
<option value="甘肃">甘肃</option>
<option value="青海">青海</option>
<option value="新疆">新疆</option>
<option value="西藏">西藏</option>
<option value="宁夏">宁夏</option>
<option value="四川">四川</option>
<option value="云南">云南</option>
<option value="吉林">吉林</option>
<option value="内蒙古">内蒙古</option>
<option value="陕西">陕西</option>
<option value="安徽">安徽</option>
<option value="贵州">贵州</option>
<option value="江苏">江苏</option>
<option value="重庆">重庆</option>
<option value="浙江">浙江</option>
<option value="江西">江西</option>
<option value="国外">国外</option>
<option value="台湾">台湾</option>
<option value="香港">香港</option>
<option value="澳门">澳门</option>
</select></td>
<td> </td>
</tr>
<tr>
<td height="30">身份证号:</td>
<td><input name="pidcard" type="text" class="form-input-border" id="pidcard" maxlength="18" checktype="idnum" checkrule="15,18" cnname="身份证号">
</td>
<td> </td>
</tr>
<tr>
<td height="30">教育程度:</td>
<td><select cnname="教育程度" name="peducation" size="1" class="form-input-border" checktype="notes" id="select">
<option value="0" selected>---请选择---</option>
<option value="高中">高 中</option>
<option value="大专">大 专</option>
<option value="本科">本 科</option>
<option value="研究生及以上">研究生及以上</option>
</select></td>
<td> </td>
</tr>
<tr>
<td height="30">政治面貌</td>
<td><select cnname="政治面貌" name="ppolitics" size="1" class="form-input-border" checktype="notes" id="ppolitics">
<option value="0" selected>---请选择---</option>
<option value="群众">群 众</option>
<option value="团员">团 员</option>
<option value="党员">党 员</option>
<option value="其他">其 他</option>
</select></td>
<td> </td>
</tr>
<tr>
<td height="30">婚姻状况:</td>
<td><select cnname="婚姻状况" name="pmarried" size="1" class="form-input-border" checktype="notes" id="pmarried">
<option value="0" selected>---请选择---</option>
<option value="未婚">未 婚</option>
<option value="已婚">已 婚</option>
</select></td>
<td> </td>
</tr>
<tr>
<td height="30">有无不良记录:</td>
<td><select cnname="有无不良记录" name="pbadhistory" size="1" class="form-input-border" checktype="notes" id="pbadhistory">
<option value="0" selected>---请选择---</option>
<option value="没有">没 有</option>
<option value="有">有</option>
</select></td>
<td> </td>
</tr>
<tr>
<td height="30">档案所在地:</td>
<td><input name="pfileplace" type="text" class="form-input-border" id="pfileplace" maxlength="100" checktype="txt" cnname="档案所在地">
*必须为中文</td>
<td> </td>
</tr>
<tr>
<td height="30"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td bgcolor="#333333" height="1" colspan="3"></td>
</tr>
<tr>
<td height="30" colspan="3"> </td>
</tr>
<tr>
<td height="30">固定电话:</td>
<td colspan="2"><input name="ptel" type="text" class="form-input-border" id="ptel" maxlength="14" checktype="num" checkrule="10,14" cnname="固定电话">
*必须加区号,格式如:01012345678 </td>
</tr>
<tr>
<td height="30">移动电话:</td>
<td><input name="pmobile" type="text" class="form-input-border" id="pmobile" maxlength="11" checktype="num" checkrule="11" cnname="移动电话"></td>
<td> </td>
</tr>
<tr>
<td height="30">电子邮件:</td>