js表单验证自我总结

最新推荐文章于 2020-09-20 16:39:57 发布

高傲的苹果

最新推荐文章于 2020-09-20 16:39:57 发布

阅读量626

点赞数

[html]
< html>
< title></title>
   <head>
   <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{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<100){
      alert("自我介绍字数不能低于100字！");
     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" οnpaste="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>
< /html>

高傲的苹果

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js表单验证自我总结

[html] function cancel(){ document.getElementById("Form").reset(); } function check(){ //验证用户名 var username = document.getElementById("username");
复制链接

扫一扫