<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http…" />

常见的js表单验证

2019.05.29 -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

 <script language = "javascript">

   function cancel(){

 

     document.getElementById("Form").reset();

   }

   function check(){

   //验证用户名

   var username = document.getElementById("username");

   if(username.value.length==0){

      alert("用户名不能为空!");

      username.focus();

      return false;

   }

   if(username.value.length<6){

    alert("用户名长度不能低于6位!");

    username.value = "";

    username.focus();

      return false;

   }

    //验证密码,确认密码

    var pass = document.getElementById("password");

    var qrpass = document.getElementById("qrpassword");

    if(pass.value.length==0){

       alert("密码不能为空!");

       pass.focus();

       return false;

     }

     if(pass.value.length<6||pass.value.length>15){

          alert("密码的长度为6-15位!");

          pass.value = "";

          pass.focus();

          return false;

     }else if(pass.value!=qrpass.value){

      alert("两次密码输入不一致!");

      qrpass.value = "";

      qrpass.focus();

       return false;

     }

     //验证身份证号

     var idcard = document.getElementById("idcard");

     if(idcard.value.length==0){

     alert("请输入你的身份证号码!");

     idcard.focus();

     return false;

     }

     var card = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/

     if(!card.test(idcard.value)){

     alert("你输入的身份证号码不正确,请重新输入!");

     idcard.value="";

     idcard.focus();

     return false;

     }

    //验证性别

    var sex = document.getElementsByName("sex");

    var boo = true;

    for(var i = 0;i<sex.length;i++){

      if(sex[i].checked==true){

        boo = false;

        break;

      }

    }

    if(boo){

        alert("请选择你的性别!");

        return false;

      }

     //验证出生日期

     var data = document.getElementById("birthday");

      if(data.value.length==0){

       alert("请输入您的出生日期!");

       pass.focus();

       return false;

      }

     //YYYY-MM-DD || YYYY/MM/DD 的日期格式

     var a=/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})/

      if(!a.test(data.value)){

        alert("日期格式不正确!nn请输入YYYY-MM-DD或者YYYY/MM/DD的格式!");

        return false;

      } 

     //验证籍贯

     var slt=document.getElementById("region");

     if(slt.value=="0"){

        alert("请选择你的籍贯!");

         return false;

       }

     //验证爱好

     var flag = true;

     var aa = document.getElementsByName("hobby");

     for(i = 0;i<aa.length;i++){

     if(aa[i].checked==true){

        flag = false;

        break;

       }

      }

       if(flag){

        alert("请选择你的爱好!");

        return false;

       }

     //验证邮箱  

     var objName = document.getElementById("email");

     var pattern = /^[a-zA-Z0-9]{1,}@[a-zA-Z0-9]{1,10}[.](com|cn|net)$/;  

     if(objName.value==0){

        alert("请输入您的邮箱!");

        objName.focus();

        return false;

     }

     if (!pattern.test(objName.value)) {  

            alert("邮箱格式不正确,请重新输入!");

            objName.value="";

            objName.focus();

            return false;  

           }  

   //验证手机号码的

   var tel = document.getElementById("tel");

  var pattern= /^1[358]d{9}$/ 

  if(tel.value.length==0){

    alert("请输入你的手机号码!");

    tel.focus();

    return false;

  }

  if(!pattern.test(tel.value)) { 

    alert("你输入的手机号码无效,请重新输入!");

    tel.value="";

    tel.focus();

      return false; 

  } 

   //验证自我介绍

   var intro = document.getElementById("intro");

   if(intro.value.length==0){

    alert("自我介绍不能为空!");

     return false;

   

   }else if(intro.value.length<10){

     alert("自我介绍字数不能低于10字!");

     return false;

   }

   }

   function checknoAll(){

   var all = document.getElementsByName("all");

   var no = document.getElementsByName("no");

   if(no[0].checked==true){

       all[0].checked=false;

       var all = document.getElementsByName("hobby");

      for(i = 0;i<all.length;i++){

      if(all[i].checked==true){

         all[i].checked=false;

       }else if(all[i].checked==false){

 

         all[i].checked=true;

      }

 

    }

  }

  }         

  function  checkAll(){

    var all = document.getElementsByName("all");

    var no = document.getElementsByName("no");

    if(all[0].checked==true){

       no[0].checked=false;

       var all = document.getElementsByName("hobby");

       for(i = 0;i<all.length;i++){

       if(!all[i].checked==true){

        all[i].checked=true;

       }

    }

  } 

  }

   </script>

</head>

 

<body>

 <form action = "" method = "post" onsubmit = "return check();" id = "Form">      

   <table border = "1" bordercolor = "green" cellspacing = "1" cellpadding = "1" align = "left" width = "500">

         <tr>

            <td colspan = "2" align = "center"><font size = "5" color = "green"><b>用户注册</b></font></td>

        </tr>

          <tr>

              <td align = "right">用户名:</td><td><input type = "text" id = "username" style = "width:150px;height:20px"/></td>

         </tr>

         <tr>

              <td align = "right">密 码:</td><td><input type = "password" id = "password" style = "width:150px;height:20px"/></td>

          </tr>

          <tr>

              <td align = "right">确认密码:</td><td><input type = "password" id = "qrpassword" style = "width:150px;height:20px" onpaste="return false"/> <font color = "red">警告:</font>禁止粘贴</td>

          </tr>

           <tr>

              <td align = "right">身份证号:</td><td><input type = "text" id = "idcard" style = "width:150px;height:20px"/></td>

          </tr>

          <tr>

              <td align = "right">性 别:</td><td>男<input type = "radio" id = "sex" name = "sex" value = "boy"/>女<input type = "radio" name = "sex" id = "sex" value = "girl"/></td>

          </tr>

          <tr>

              <td align = "right">出生日期:</td><td><input type = "text" id = "birthday" style = "width:150px;height:20px"/> <font color = "red">YYYY-MM-DD或者YYYY/MM/DD</font></td>

          </tr>

          <tr>

              <td align = "right">籍 贯:</td><td><select id = "region">

              <option value = "0">--请选择籍贯--</option>

              <option value = "1">河南省郑州市</option>

              <option value = "2">河南省信阳市</option>

              <option value = "3">北京市海淀区</option>

              <option value = "4">辽宁省大连市</option>

              <option value = "5">广东省深圳市</option>

              </select>

              </td>

          </tr>

          <tr>

              <td align = "right">爱 好:</td><td><input type = "checkbox" id = "hobby" value = "music"/>音乐

              <input type = "checkbox" id = "hobby" name = " hobby" value = "basketball"/>篮球

              <input type = "checkbox" id = "hobby" name = " hobby" value = "visitor"/>旅游

              <input type = "checkbox" id = "hobby" name = " hobby" value = "sleep"/>睡觉

               <font color = "red">*</font>

               <input type = "checkbox" id = "all" name = " all" onclick = "checkAll()"/>全选

                <input type = "checkbox" id = "no" name = " bo" onclick = "checknoAll()"/>反选</td>

          </tr>

           <tr>

              <td align = "right">邮 箱:</td><td><input type = "text" id = "email" style = "width:150px;height:20px"/></td>

          </tr>

            <tr>

              <td align = "right">手机号码:</td><td><input type = "text" id = "tel" style = "width:150px;height:20px"/></td>

          </tr>

          <tr>

              <td align = "right">自我介绍:</td><td><textarea id = "intro" style = "width:150px;height:50px"></textarea></td>

          </tr>

          <tr>

          <td colspan = "2" align = "right">

            <input type = "submit" value = " 提交注册信息 " />      <input type = "reset" onclick = "cancel()" value = " 全部清空 "/>

          </td>

        </table>

     </form>

     </body>

</body>

</html>

- END -

223
0

php 随机 include_once

php 随机 include_once 加载模板 PHP带权重的随机跳转源码