javascript表单正则应用

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

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");
 }  
      }  
    }    
  }
}

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