[javascript学习指南]javascript表单正则应用

【www.bbyears.com--正则表达式】

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

html部分

  

  <scripttype="text/javascript"src="js/regForm.js"></script>   

        用户名

        Email

        (请输入正确的Email地址)

        密码

        word"id="password">

        (请输入强度较高的密码)

        密码强度

          弱

          中

          强

        确认密码

        MSN

        QQ

        (请输入正确的QQ号码)

        办公电话

        家庭电话

        手机

        (请输入正确的手机号)

        密码提示问题

          请选择密码提示问题

          你热爱编程吗？

          你的中学名字是？

          最开心的事是什么？

        密码问题答案

        我已看过并接受《用户协议》

css部分>>

body{

background:url("../image/10.png")repeat-x;

}

#section{

  width:1002px;

  height:612px;

  margin:15pxauto;

  position:relative;

}

#table{

  width:600px;

  height:550px;

  background-color:#fff;

  position:absolute;

  font-size:18px;

  line-height:5px;

  border-radius:5px;

  box-shadow:0015px2pxrgba(0,0,0,0.4);

  padding:20px30px;

  box-sizing: border-box;

  width:80%;

  margin:010%;

}

#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的情况下进行操作

//封装一下兼容性函数

  varEV ={

    //绑定事件兼容

    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事件处理

  vareMail = document.getElementById("email");

  EV.addEvent(eMail,"blur",checkEmail);

  functioncheckEmail(){

    varemail = document.getElementById("email").value;

    varemailicon = document.getElementById("emailicon");

    varepatt =newRegExp("\\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";

    }

  }

//密码强度检测

  varpwd =document.getElementById("password");

  EV.addEvent(pwd,"blur",checkCode);

  functioncheckCode(){

    varpwdv =document.getElementById("password").value;

    varlow =document.getElementById("low");

    varmiddle =document.getElementById("middle");

    varstrong =document.getElementById("strong");

    varpwssicon =document.getElementById("phoneicon");

    varpwdpatt1 = /\d+/g;//数字

    varpwdpatt2 = /[a-zA-Z]+/g;//字母

    varpwdpatt3 = /(\W)+/g;//特殊字符

    varbooldata1,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号码

    varqq =document.getElementById("qq");

    EV.addEvent(qq,"blur",checkQQ);

    functioncheckQQ(){

      varqqicon =document.getElementById("qqicon");

      varqqtext =document.getElementById("qq").value;

      varqqpatt = /^[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";

      }

    }

    //检测手机号

    varphone = document.getElementById("phone");

    EV.addEvent(phone,"blur",checkPhone);

      functioncheckPhone(){

        varphoneicon =document.getElementById("phoneicon");

        varphonenum = document.getElementById("phone").value;

        varphonepatt = /^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";

        }

      }

  //检测用户名

    varusername = document.getElementById("username");

    EV.addEvent(username,"blur",checkUser);

    functioncheckUser(){

      varusercon = document.getElementById("username").value;

      varusernameicon =document.getElementById("usernameicon");

      varunpatt = /[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";

      }

    }

  //确认密码

    varCfpw =document.getElementById("cfpw");

    EV.addEvent(Cfpw,"blur",cfPw);

    functioncfPw(){

      varcfpw =document.getElementById("cfpw").value;

      varcfpwicon=document.getElementById("cfpwicon");

      varpwd =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

    varMsn = document.getElementById("msn");

    EV.addEvent(Msn,"blur",checkMsn);

    functioncheckMsn(){

      varmsn =document.getElementById("msn").value;

      varmsnicon =document.getElementById("msnicon");

      varmsnpatt = /\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";

      }

    } 

  //办公电话

    varofficephone =document.getElementById("offphone");

    EV.addEvent(officephone,"blur",checkoffPhone);

    functioncheckoffPhone(){

      varoffphone = document.getElementById("offphone").value;

      varoffphoneicon =document.getElementById("offphoneicon");

      varoffpatt = /(\(\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";

      }

    }

  //家庭电话

    varHomephone =document.getElementById("homephone");

    EV.addEvent(Homephone,"blur",checkHomephone);

    functioncheckHomephone(){

      varhomephone =document.getElementById("homephone").value;

      varhomephoneicon =document.getElementById("homephoneicon");

      varhomepatt = /(\(\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";

      }

    }

  //问题答案

      functioncheckAnswer(){

      varanswer =document.getElementById("answer").value;

      varanswericon =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";

      }

    }

  //登录注册

      varlogin =document.getElementById("login");

      EV.addEvent(login,"click",Login);

      functionLogin(){

        varform =document.getElementById("form");

        if(username.value==""){

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

          this.value.focus();

          returnfalse;

        }

        if(password.value==""){

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

          this.value.focus();

          returnfalse;

        }

        if(email.value==""){

          alert("email不能为空!");

          this.value.focus();

          returnfalse;

        }

        else{

        varinfo =confirm("信息填写完整，确定注册吗?");

        if(info==true){

          window.open("http://www.eduasksz.com","_blank");

        } 

      } 

    }   

  }

}

本文来源：http://www.bbyears.com/aspjiaocheng/123495.html