javascript表单正则应用

2019-11-19 17:44:45

字体：大中小

来源：转载

供稿：网友

以下是之前练习正则表达式时候做的js表单测试.
input里的value用.test()比较以后，处理正则和需求，反馈，代码欠优化，但功能完善，仅供参考学习

html部分

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>新用户注册</title>  <link rel="stylesheet" href="./css/regForm.css" type="text/css">  <script type="text/javascript" src="js/regForm.js"></script>    <!--外部样式和JS*--></head><body>  <div id="section">    <form action="" method="get" id="form">    <table id="table">      <tr>        <td>用户名</td>        <td><input id="username" type="text" class="text"></td>        <td><div class="icon" id="usernameicon"></div></td>      </tr>      <tr>        <td>Email</td>        <td><input type="text" class="text" id="email"></td>        <td><div class="icon" id="emailicon">(请输入正确的Email地址)</div></td>      </tr>      <tr>        <td>密码</td>        <td><input type="password" id="password"></td>        <td><div id="pwicon" class="icon">(请输入强度较高的密码)</div></td>      </tr>      <tr>        <td>密码强度</td>        <td>          <div class="pwstrength" id="low">弱</div>          <div class="pwstrength" id="middle">中</div>          <div class="pwstrength" id="strong">强</div>        </td>        <td></td>      </tr>      <tr>        <td>确认密码</td>        <td><input id="cfpw" type="password" class="text" value=""></td>        <td><div class="icon" id="cfpwicon"></div></td>      </tr>      <tr>        <td>MSN</td>        <td><input id="msn" type="text" class="text">        </td>        <td><div class="icon" id="msnicon"></div></td>      </tr>      <tr>        <td>QQ</td>        <td><input type="text" class="text" id="qq">        </td>        <td><div id="qqicon" class="icon">(请输入正确的QQ号码)</div></td>      </tr>      <tr>        <td>办公电话</td>        <td><input id="offphone" type="text" class="text"></td>        <td><div class="icon" id="offphoneicon"></div></td>      </tr>      <tr>        <td>家庭电话</td>        <td><input id="homephone" type="text" class="text">        </td>        <td><div class="icon" id="homephoneicon"></div></td>      </tr>      <tr>        <td>手机</td>        <td ><input type="text" class="text" id="phone"></td>        <td><div class="icon" id="phoneicon">(请输入正确的手机号)</div></td>      </tr>      <tr>        <td>密码提示问题</td>        <td>        <select class="text" name="question" value="">          <option value="" selected>请选择密码提示问题</option>          <option value="">你热爱编程吗？</option>          <option value="">你的中学名字是？</option>          <option value="">最开心的事是什么？</option>        </select>                </td>        <td></td>      </tr>      <tr>        <td>密码问题答案</td>        <td><input id="answer" type="text" class="text"></td>        <td><div class="icon" id="answericon"></div></td>      </tr>      <tr>        <td></td>        <td class="lasttext"><input type="radio">我已看过并接受《<a href="">用户协议</a>》</td>        <td></td>      </tr>      <tr>        <td></td>        <td><input type="image" src="image/login.png" id="login"></td>        <td></td>      </tr>    </table>    </form>  </div> </body></html>

css部分>>

body{background:url("../image/10.png") repeat-x;}#section{  width:1002px;  height:612px;  margin:15px auto;  position:relative;}#table{  width:600px;  height:550px;  background-color:#fff;  position:absolute;  font-size:18px;  line-height:5px;  border-radius: 5px;  box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.4);  padding: 20px 30px;  box-sizing: border-box;  width: 80%;  margin: 0 10%;}#table .pwstrength{  float:left;  height:30px;  width:60px;  line-height:30px;  text-align:center;  border-radius:4px;  color:#000;}#table .text{  width:215px;  height:32px;}#password{  width:215px;  height:32px;}#table .lasttext{  font-size:14px;}#table tr td{  width:180px;}#table .icon{  width:175px;  height:24px;  float:left;  background:no-repeat;  font-size:12px;  color:#000;  text-align:right;  line-height:24px;}

javascript部分，这边使用的是dom2级操作，先封装好事件对象，在IE和非IE的情况下进行操作

//封装一下兼容性函数  var EV ={    //绑定事件兼容    addEvent:function(node,ename,fn){      if(navigator.userAgent.toLowerCase().indexOf("ie")!=-1){       //在ie下添加绑定事件        node.attachEvent("on"+ename,fn);      }else{        node.addEventListener(ename,fn,false);      }    },    removeEvent:function(node,ename,fn){      if(navigator.userAgent.toLowerCase().indexOf("ie")!=-1){       //在ie下添加绑定事件        node.detachEvent("on"+ename,fn);      }else{        node.removeEventListener(ename,fn,false);      }    }  }window.onload=function(){//email地址检测 html事件处理  var eMail = document.getElementById("email");  EV.addEvent(eMail,"blur",checkEmail);  function checkEmail(){     var email = document.getElementById("email").value;    var emailicon = document.getElementById("emailicon");    var epatt = new RegExp("//w+@[a-zA-Z0-9]+//.[a-zA-Z0-9]{2,14}");                          //利用正则表达式    if(epatt.test(email)){      emailicon.style.backgroundImage="url('image/tick.png')";      emailicon.innerHTML="";    }    else{      emailicon.style.backgroundImage="url('image/cross.png')";      emailicon.innerHTML="请输入正确的邮箱地址!";      emailicon.style.color="#dd0000";    }  }//密码强度检测  var pwd =document.getElementById("password");  EV.addEvent(pwd,"blur",checkCode);  function checkCode(){    var pwdv =document.getElementById("password").value;    var low =document.getElementById("low");    var middle =document.getElementById("middle");    var strong =document.getElementById("strong");    var pwssicon =document.getElementById("phoneicon");    var pwdpatt1 = //d+/g; //数字    var pwdpatt2 = /[a-zA-Z]+/g; //字母    var pwdpatt3 = /(/W)+/g; //特殊字符    var booldata1,booldata2,booldata3;    if(pwdv.length<6){      pwicon.style.backgroundImage="url('image/cross.png')";      pwicon.innerHTML="密码不得少于6位数!";      pwicon.style.color="#dd0000";    }    if(pwdv==""){      pwicon.style.backgroundImage="url('image/cross.png')";      pwicon.innerHTML="密码项不能为空!";      pwicon.style.color="#dd0000";    }    if(pwdpatt1.test(pwdv)){      booldata1 = true;    }    if(pwdpatt2.test(pwdv)){      booldata2 = true;    }    if(pwdpatt3.test(pwdv)){      booldata3 = true;    }      if(booldata1||booldata2||booldata3){        low.style.backgroundColor="#CB4042";        pwicon.style.backgroundImage="url('image/tick.png')";        pwicon.innerHTML="";      }                    //强度低      if((booldata1&&booldata2)||(booldata1&&booldata3)||(booldata3&&booldata2)){        middle.style.backgroundColor="#F7C242";         pwicon.style.backgroundImage="url('image/tick.png')";        pwicon.innerHTML="";        //强度中      }      if(booldata1&&booldata2&&booldata3){        strong.style.backgroundColor="#227D51";        pwicon.style.backgroundImage="url('image/tick.png')";         pwicon.innerHTML="";              //强度强      }    }     //检测QQ号码    var qq =document.getElementById("qq");    EV.addEvent(qq,"blur",checkQQ);    function checkQQ(){      var qqicon =document.getElementById("qqicon");      var qqtext =document.getElementById("qq").value;      var qqpatt = /^[1-9](/d{5,10})$/;      if(qqpatt.test(qqtext)){        qqicon.style.backgroundImage="url('image/tick.png')";        qqicon.innerHTML="";      }      else{        qqicon.style.backgroundImage="url('image/cross.png')";        qqicon.innerHTML="请输入5至11位数的QQ号码";        qqicon.style.color="#dd0000";      }    }    //检测手机号     var phone = document.getElementById("phone");    EV.addEvent(phone,"blur",checkPhone);      function checkPhone(){        var phoneicon =document.getElementById("phoneicon");        var phonenum = document.getElementById("phone").value;        var phonepatt = /^0?(13|15|14|18)[0-9]{9}$/;        if(phonepatt.test(phonenum)){          phoneicon.style.backgroundImage="url('image/tick.png')";          phoneicon.innerHTML="";        }        else{          phoneicon.style.backgroundImage="url('image/cross.png')";          phoneicon.innerHTML="请输入正确的手机号!";          phoneicon.style.color="#dd0000";        }      }  //检测用户名    var username = document.getElementById("username");    EV.addEvent(username,"blur",checkUser);    function checkUser(){      var usercon = document.getElementById("username").value;      var usernameicon =document.getElementById("usernameicon");      var unpatt = /[A-Za-z0-9_/-/u4e00-/u9fa5]{6,18}/;      if(unpatt.test(usercon)){        usernameicon.style.backgroundImage="url('image/tick.png')";        usernameicon.innerHTML="";      }      else{        usernameicon.style.backgroundImage="url('image/cross.png')";        usernameicon.innerHTML="用户名至少大于6个字符!";        usernameicon.style.color="#dd0000";      if(usercon==""){        usernameicon.style.backgroundImage="url('image/cross.png')";        usernameicon.innerHTML="用户名不能为空!";        usernameicon.style.color="#dd0000";      }    }  //确认密码    var Cfpw =document.getElementById("cfpw");    EV.addEvent(Cfpw,"blur",cfPw);    function cfPw(){      var cfpw =document.getElementById("cfpw").value;      var cfpwicon=document.getElementById("cfpwicon");      var pwd =document.getElementById("password").value;      if(cfpw==pwd&&cfpw!=""){        cfpwicon.style.backgroundImage="url('image/tick.png')";        cfpwicon.innerHTML="";      }else{        cfpwicon.style.backgroundImage="url('image/cross.png')";        cfpwicon.innerHTML="输入的密码不一致!";        cfpwicon.style.color="#dd0000";      }    }  //MSN    var Msn = document.getElementById("msn");    EV.addEvent(Msn,"blur",checkMsn);    function checkMsn(){      var msn =document.getElementById("msn").value;      var msnicon =document.getElementById("msnicon");      var msnpatt = //w+@[a-zA-Z0-9]+/.[a-zA-Z0-9]{2,14}/;      if(msnpatt.test(msn)){        msnicon.style.backgroundImage="url('image/tick.png')";        msnicon.innerHTML="";      }else{        msnicon.style.backgroundImage="url('image/cross.png')";        msnicon.innerHTML="msn应为正确邮箱地址!";        msnicon.style.color="#dd0000";      }    }    //办公电话    var officephone =document.getElementById("offphone");    EV.addEvent(officephone,"blur",checkoffPhone);    function checkoffPhone(){      var offphone = document.getElementById("offphone").value;      var offphoneicon =document.getElementById("offphoneicon");      var offpatt = /(/(/d{3,4}/)|/d{3,4}-)?/d{8}/;      if(offpatt.test(offphone)){        offphoneicon.style.backgroundImage="url('image/tick.png')";        offphonecon.innerHTML="";      }else{        offphoneicon.style.backgroundImage="url('image/cross.png')";        offphoneicon.innerHTML="例:010-88888888";        offphoneicon.style.color="#dd0000";      }    }  //家庭电话    var Homephone =document.getElementById("homephone");    EV.addEvent(Homephone,"blur",checkHomephone);    function checkHomephone(){      var homephone =document.getElementById("homephone").value;      var homephoneicon =document.getElementById("homephoneicon");      var homepatt = /(/(/d{3,4}/)|/d{3,4}-)?/d{8}/;      if(homepatt.test(homephone)){        homephoneicon.style.backgroundImage="url('image/tick.png')";        homephonecon.innerHTML="";      }else{        homephoneicon.style.backgroundImage="url('image/cross.png')";        homephoneicon.innerHTML="例:010-88888888";        homephoneicon.style.color="#dd0000";      }    }  //问题答案      function checkAnswer(){      var answer =document.getElementById("answer").value;      var answericon =document.getElementById("answericon");      if(answer!=""){        answericon.style.backgroundImage="url('image/tick.png')";        answercon.innerHTML="";      }else{        answericon.style.backgroundImage="url('image/cross.png')";        answericon.innerHTML="密码问题答案不能为空!";        answericon.style.color="#dd0000";      }    }  //登录注册      var login =document.getElementById("login");      EV.addEvent(login,"click",Login);      function Login(){        var form =document.getElementById("form");        if(username.value==""){          alert("用户名不能为空!");          this.value.focus();          return false;        }        if(password.value==""){          alert("密码不能为空!");          this.value.focus();          return false;        }        if(email.value==""){          alert("email不能为空!");          this.value.focus();          return false;        }        else{        var info =confirm("信息填写完整，确定注册吗?");        if(info==true){          window.open("http://www.eduasksz.com","_blank");        }        }      }      }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JavaScript获取当前时间向前推三个月的方法示例

下一篇：JS中的phototype详解