前端

img arrowy

通用的表单检查Javascript脚本

发表于2004/11/1 14:11:00  1437人阅读

关键字: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">&nbsp;&nbsp;</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">&nbsp;</td>
                          <td width="50%">&nbsp;</td>
                          <td width="35%">&nbsp;</td>
                        </tr>
                        <tr>
                          <td height="30" colspan="3">&nbsp;</td>
                        </tr>
                        <tr>
                          <td height="30">&nbsp;</td>
                          <td>&nbsp;</td>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td height="30">姓&nbsp;&nbsp;&nbsp;&nbsp;名:</td>
                          <td><input name="pname" type="text" class="form-input-border" id="pname" maxlength="12" checktype="cn" cnname="姓名">
                            *必须填写中文</td>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td height="30">性&nbsp;&nbsp;&nbsp;&nbsp;别:</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</td>
                        </tr>
                        <tr>
                          <td height="30">&nbsp;</td>
                          <td>&nbsp;</td>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td bgcolor="#333333" height="1" colspan="3"></td>
                        </tr>
                        <tr>
                          <td height="30" colspan="3">&nbsp;</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>&nbsp;</td>
                        </tr>
                        <tr>
                          <td height="30">电子邮件:</td>
                          <td><input name="pmail" type="text" class="form-input-border" id="pmail" maxlength="50" checktype="mail" checkrule="0" cnname="电子邮件"></td>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td height="30">通信地址:</td>
                          <td><input name="paddress" type="text" class="form-input-border" id="paddress" maxlength="100" checktype="notes" cnname="通信地址"></td>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td height="30">邮政编码:</td>
                          <td><input name="pzip" type="text" class="form-input-border" id="pzip" maxlength="6" checktype="num" checkrule="6" cnname="邮政编码">
                          </td>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td height="30">&nbsp;</td>
                          <td>&nbsp;</td>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td bgcolor="#333333" height="1" colspan="3"></td>
                        </tr>
                        <tr>
                          <td height="30">&nbsp;</td>
                          <td>&nbsp;</td>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td height="30">职业认证:</td>
                          <td colspan="2"><textarea name="ppco" cols="80" rows="6" wrap="VIRTUAL" class="form-input-border" id="ppco" maxlength="400" cnname="职业认证" checktype="txt"></textarea>
                          </td>
                        </tr>
                        <tr>
                          <td height="30">目前年薪:</td>
                          <td><select cnname="目前年薪" name="psalary" size="1" class="form-input-border" checktype="notes" id="psalary">
                              <option value="0" selected>---请选择---</option>
                              <option value="2万以下">2万以下</option>
                              <option value="2万-3万">2万-3万</option>
                              <option value="3万-5万">3万-5万</option>
                              <option value="5万-10万">5万-10万</option>
                              <option value="5万-10万几个方面">10万以上</option>
                            </select></td>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td height="30">工作经验:</td>
                          <td><select name="pworkhistory" size="1" class="form-input-border" checktype="notes" cnname="工作经验" id="pworkhistory" >
                              <option value="0" selected>---请选择---</option>
                              <option value="一年以下">一年以下</option>
                              <option value="一年至三年">一年至三年</option>
                              <option value="三年至五年">三年至五年</option>
                              <option value="五年以上">五年以上</option>
                            </select></td>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td height="30">应聘职位:</td>
                          <td><select name="pposition" size="1" class="form-input-border" id="pposition" checktype="notes" cnname="应聘职位">
                              <option value="0" selected>---请选择---</option>
                            
                            </select></td>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td height="10" colspan="3"></td>
                        </tr>
                        <tr>
                          <td height="30">求职说明:</td>
                          <td colspan="2"><textarea cnname="求职说明" maxlength="400" name="pexponent" cols="80" rows="6" wrap="VIRTUAL" checktype="txt" class="form-input-border" id="pexponent"></textarea>
                          </td>
                        </tr>
                        <tr>
                          <td height="10" colspan="3"></td>
                        </tr>
                        <tr>
                          <td height="30">工作经历:</td>
                          <td colspan="2"><textarea cnname="工作经历" maxlength="1200" name="pworkstory" cols="80" rows="15" wrap="VIRTUAL" class="form-input-border" checktype="txt" id="pworkstory"></textarea></td>
                        </tr>
                        <tr>
                          <td height="10" colspan="3"></td>
                        </tr>
                        <tr>
                          <td height="30">要求待遇:</td>
                          <td colspan="2"><textarea cnname="要求待遇" maxlength="400" name="pretreatment" cols="80" rows="5" wrap="VIRTUAL" class="form-input-border" checktype="txt" id="pretreatment"></textarea></td>
                        </tr>
                        <tr>
                          <td height="30">&nbsp;</td>
                          <td>&nbsp;</td>
                          <td>&nbsp;</td>
                        </tr>
                        <tr>
                          <td height="30" colspan="3"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                <td width="54%"> <div align="right">
                                    <input name="Submit" type="submit" class="botton-style" value="提     交" checktype="notes">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div></td>
                                <td width="46%"> <div align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <input name="reset" type="reset" class="botton-style" id="reset" value="重     填" checktype="notes">
                                  </div></td>
                              </tr>
                            </table></td>
                        </tr>
                      </table>
                    </form></td>
                </tr>
              </table>
      </body>
</html>

阅读全文
0 0

相关文章推荐

img
取 消
img