首页
所有分类
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入门教程(9) Document文档对象
Jan 31 Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
JS随机漂浮广告代码具体实例
Nov 19 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 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
Vue(10) axios(1) vuex(1) Set接口(1) persistedstate(1) OutputStream(1) 高动态范围(1) InputStream(1) HashSet集合(1) Vue3(1)
You might like
用PHP读注册表
2006/10/09 PHP
php print EOF实现方法
2009/05/21 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
基于php实现的验证码小程序
2016/12/13 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
JavaScript的单例模式 （singleton in Javascript)
2010/06/11 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
Bootstrap每天必学之按钮（Button）插件
2016/04/25 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
es6的数字处理的方法（5个）
2017/03/16 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
webpack热模块替换（HMR）/热更新的方法
2018/04/05 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
基于随机梯度下降的矩阵分解推荐算法（python）
2018/08/31 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
基于Python fminunc 的替代方法
2020/02/29 Python
python3 xpath和requests应用详解
2020/03/06 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
大学毕业生自我鉴定
2013/11/05 职场文书
养成教育经验材料
2014/05/26 职场文书
公司门卫工作职责
2014/06/28 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书