首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript表单正则应用

Posted in Javascript onFebruary 04, 2017

以下是之前练习正则表达式时候做的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表单正则应用

- Author -

Jack-小俊

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript实现的分页函数
Feb 07 Javascript
jQuery学习3：操作元素属性和特性
Feb 07 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
js选项卡的实现方法
Feb 09 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
shiro授权的实现原理
Sep 21 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
JS中的phototype详解
Feb 04 #Javascript
详解JavaScript RegExp对象
Feb 04 #Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 #Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 #Javascript
纯js模仿windows系统日历
Feb 04 #Javascript
canvas的神奇用法
Feb 03 #Javascript
Jquery实现跨域异步上传文件总结
Feb 03 #Javascript
共享文件夹(1) 表约束(2) caddy(1) 主从复制(1) ESXI(1) NginxConfig(1) SVN(1) Slave(1) Master(1) 骨架屏(1)
You might like
PHP大转盘中奖概率算法实例
2014/10/21 PHP
php实现评论回复删除功能
2017/05/23 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
python numpy数组复制使用实例解析
2020/01/10 Python
python实现udp聊天窗口
2020/03/31 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
Supersmart英国：欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
如何进行有效的自我评价
2013/09/27 职场文书
应届医学毕业生求职信分享
2013/12/02 职场文书
采购主管工作职责
2013/12/12 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
保护环境标语
2014/06/09 职场文书
安全责任书模板
2014/07/22 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
妈妈活动方案
2014/08/15 职场文书
后备干部推荐材料
2014/12/24 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
python引入其他文件夹下的py文件具体方法
2021/05/23 Python