当前位置： 移动技术网 > IT编程>开发语言>JavaScript > javascript表单正则应用

javascript表单正则应用

2019年03月27日  | 移动技术网IT编程  | 我要评论

以下是之前练习正则表达式时候做的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");
        }  
      }  
    }    
  }
}

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网