js常用表单验证

最新推荐文章于 2024-06-29 16:57:52 发布

sutku

最新推荐文章于 2024-06-29 16:57:52 发布

阅读量820

点赞数

分类专栏：页面文章标签： class input border url function javascript

本文链接：https://blog.csdn.net/sutku/article/details/5638538

版权

页面专栏收录该内容

4 篇文章 0 订阅

订阅专栏

============================js===========================================

/**
* 基础JS类，封装常用的js表单验证操作.
* 页面调用方法:Base.match('input',Base.IP)
* @author 贺少辉.
*/
var Base = function (){};
/*IP地址*/Base.IP=/^((2[0-4]/d|25[0-5]|[01]?/d/d?)/.){3}(2[0-4]/d|25[0-5]|[01]?/d/d?)$/;
/*QQ号*/Base.QQ=/^/d{5,12}$/;
/*邮件*/Base.EMAIL=/^([a-z0-9A-Z]+[-|/_|/.]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?/.)+[a-zA-Z]{2,}$/;
/*身份证*/Base.IDCARD=/^((1[1-5])|(2[1-3])|(3[1-7])|(4[1-6])|(5[0-4])|(6[1-5])|71|(8[12])|91)/d{4}((19/d{2}(0[13-9]|1[012])(0[1-9]|[12]/d|30))|(19/d{2}(0[13578]|1[02])31)|(19/d{2}02(0[1-9]|1/d|2[0-8]))|(19([13579][26]|[2468][048]|0[48])0229))/d{3}(/d|X|x)?$/;
/*座机*/Base.PHONE=/^/(0/d{2}/)[- ]?/d{8}|0/d{2}[- ]?/d{8}|/(0/d{3}/)[- ]?/d{8}|0/d{3}[- ]?/d{8}$/;
/*移动*/Base.MOBILE=/^1(3[4-9]|5[012789]|8[78])/d{8}$/;
/*联通*/Base.UNICOM=/^1(3[0-2]|5[56]|8[56])/d{8}$/;
/*电信*/Base.TELECOM=/^18[09]/d{8}$/;

/**
* 正则匹配函数,如果匹配成功则返回false,否则返回true
* @param input 要匹配的字符序列.
* @param input 正则表达式.
*/
Base.match=function(input,regex){
   return !(regex.test(input));
}

/**
* 检查是否为网址
* @param {} str_url
* @param {} alertStr    弹出字段内容
* @param {} idStr    光标定位的字段ID<b>只能接收ID</b>
* @return {Boolean} <b>不是</b>网址返回false;
*/
Base.isURL=function(str_url){// 验证url
    var strRegex = "^((https|http|ftp|rtsp|mms)?://)" +
    "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" // ftp的user@
+
    "(([0-9]{1,3}/.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
+
    "|" // 允许IP和DOMAIN（域名）
+
    "([0-9a-z_!~*'()-]+/.)*" // 域名- www.
+
    "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]/." // 二级域名
+
    "[a-z]{2,6})" // first level domain- .com or .museum
+
    "(:[0-9]{1,4})?" // 端口- :80
+
    "((/?)|" // a slash isn't required if there is no file name
+
    "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
    var re = new RegExp(strRegex);
    return !(re.test(str_url));
   /* 这种写法可以参考一下if (!re.test(str_url))
        this.AlertAndRFalse(alertStr, idStr);
        */
}

=================================页面===============================

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>js表单验证</title>
<script src="./form.js"></script>
<script language="javascript">
function addRoom(){
   if(form1.ip.value==""||Base.match(form1.ip.value,Base.IP)){
     alert("请输入正确的IP地址");
     document.getElementById('ip').focus();
return ;
   }
   if(form1.qq.value==""||Base.match(form1.qq.value,Base.QQ)){
     alert("请输入正确的qq地址");
return ;
   }
    if(form1.email.value==""||Base.match(form1.email.value,Base.EMAIL)){
     alert("请输入正确的email");
return ;
   }
    if(form1.idcard.value==""||Base.match(form1.idcard.value,Base.IDCARD)){
     alert("请输入正确的身份证");
return ;
   }
    if(form1.phone.value==""||Base.match(form1.phone.value,Base.PHONE)){
     alert("请输入正确的座机");
return ;
   }
    if(form1.mobile.value==""||Base.match(form1.mobile.value,Base.MOBILE)){
     alert("请输入正确的移动号码");
return ;
   }
   if(form1.unicom.value==""||Base.match(form1.unicom.value,Base.UNICOM)){
     alert("请输入正确的联通号码");
return ;
   }
   if(form1.telecom.value==""||Base.match(form1.telecom.value,Base.TELECOM)){
     alert("请输入正确的电信号码");
return ;
   }
   if(form1.url.value==""||Base.isURL(form1.url.value)){
     alert("请输入正确的URL地址");
     document.getElementById('url').focus();
return ;
   }
    if(form1.price.value==""){
      alert("请输入价格!");
   form1.price.foucs();
   return;
}
if(form1.order_no.value==""){
       alert("请输入排序号!");
    return ;
}
}

</script>
</head>
<body>
<form action="" method="post" name="form1">
    <table width="100%" border="0" cellspacing="0" cellpadding="4">
  <tr>
   <td colspan="2" align="center">
    <table width="100%" border="0" cellspacing="0" cellpadding="4"><tr><td>您的位置：JS表单验证 </td></tr></table>
     <table width="100%" border="0" cellpadding="4" cellspacing="1" bgcolor="#333333">
     <tr><td colspan="2" valign="top" bgcolor="#FFFFFF">
       <table width="98%" border="0" align="center" cellpadding="4" cellspacing="1" bgcolor="#D2D2D2" class="tb_bd line20px">
        <tr><td width="24%" align="right" class="tbtr_bg">IP地址：</td>
         <td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
              <INPUT name="ip" id="ip" class="box_60" maxlength="50" size="20">
         </td>
        </tr>
        <tr><td width="24%" align="right" class="tbtr_bg">QQ号：</td>
         <td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
              <INPUT name="qq" id="qq" class="box_60" maxlength="50" size="20">
         </td>
        </tr>
        <tr><td width="24%" align="right" class="tbtr_bg">email：</td>
         <td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
              <INPUT name="email" id="email" class="box_60" maxlength="50" size="20">
         </td>
        </tr>
        <tr><td width="24%" align="right" class="tbtr_bg">身份证：</td>
         <td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
              <INPUT name="idcard" id="idcard" class="box_60" maxlength="50" size="20">
         </td>
        </tr>
        <tr><td width="24%" align="right" class="tbtr_bg">座机：</td>
         <td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
              <INPUT name="phone" id="phone" class="box_60" maxlength="50" size="20">
         </td>
        </tr>
        <tr><td width="24%" align="right" class="tbtr_bg">移动号码：</td>
         <td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
              <INPUT name="mobile" id="mobile" class="box_60" maxlength="50" size="20">
         </td>
        </tr>
        <tr><td width="24%" align="right" class="tbtr_bg">联通号码：</td>
         <td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
              <INPUT name="unicom" id="unicom" class="box_60" maxlength="50" size="20">
         </td>
        </tr>
        <tr><td width="24%" align="right" class="tbtr_bg">电信号码：</td>
         <td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
              <INPUT name="telecom" id="telecom" class="box_60" maxlength="50" size="20">
         </td>
        </tr>
        <tr><td width="24%" align="right" class="tbtr_bg">URL地址：</td>
         <td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
              <INPUT name="url" id="url" class="box_60" maxlength="50" size="20">
         </td>
        </tr>
        <tr><td width="24%" align="right" class="tbtr_bg">价格：</td>
         <td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
                               <input class="box_60" align="left" valign="middle" maxlength="7" style="ime-mode:disabled" οnkeyup="if(!/^/d+(/./d*)?$/.test(this.value))this.value=''" οnpaste="return false" name="price" id="price" >
         </td>
        </tr>
        <tr><td width="24%" align="right" class="tbtr_bg">排序号：</td>
         <td width="76%" align="left" bgcolor="#FFFFFF" class="fontred">
                                      <input align="left" valign="middle" maxlength="4" style="ime-mode:disabled" οnkeyup="if(!/^/d+(/d*)?$/.test(this.value))this.value=''" οnpaste="return false" name="order_no" id="order_no" > </td>
        </tr>
                                <tr bgcolor="#FFFFFF">
         <td align="center" colspan="4" colspan=2>
          <input name="Submit124" onClick="addRoom()" type="button" value="保存">
           <input name="Submit12422" type="button" value="返回" onClick="javascript:window.history.back();">
          </td>
        </tr>
        </table>
                </td>
   </tr>
  </table>
</form>
</body>
</html>

sutku

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js常用表单验证

============================js===========================================/** * 基础JS类，封装常用的js表单验证操作. * 页面调用方法:Base.match('input',Base.IP) * @author 贺少辉. */ var Base = function (){}; /*IP地址*/Base.IP=/^((2[0-4]/d|25[0-5]|[01]?/d/d?)/.){3}(2[0-4]/d|25[0-5]|[01
复制链接

扫一扫