首页
所有分类
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 相关文章推荐
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
详解JavaScript基于面向对象之创建对象（1）
Dec 10 Javascript
JS打印组合功能
Aug 04 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
vue - vue.config.js中devServer配置方式
Oct 30 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 Javascript
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) 陨石(1) DNA(2) 火星(2) RNA(2) 嘧啶碱基(2) 富碳陨石(1) iPhone(1) 大脑(1) 美国航天局(1)
You might like
用Zend Encode编写开发PHP程序
2010/02/21 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
Django工程的分层结构详解
2019/07/18 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
CSS3 渐变（Gradients）之CSS3 径向渐变
2016/07/08 HTML / CSS
中国最大隐形眼镜网上商城：视客眼镜网
2016/10/30 全球购物
体育教师自荐信范文
2013/12/16 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
2015年组织部工作总结
2015/04/03 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
利用Python实现Picgo图床工具
2021/11/23 Python