登录
当前位置： 首页 > 编程笔记 >

javascript表单正则应用

萧鹏云
2023-03-14
本文向大家介绍javascript表单正则应用，包括了javascript表单正则应用的使用技巧和注意事项，需要的朋友参考一下

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

    本文向大家介绍Javascript的表单验证-初识正则表达式，包括了Javascript的表单验证-初识正则表达式的使用技巧和注意事项，需要的朋友参考一下 推荐阅读：Javascript的表单验证长度 Javascript的表单验证-提交表单 Javascript的表单验证-揭开正则表达式的面纱 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 验证日期

  • 正则表达式 - 正则 (?:x) 如何应用？

    (?:x) (x) 这两个好像可以平价替换的吧。有什么特殊应用吗？

  • JavaScript正则表达式之multiline属性的应用

    本文向大家介绍JavaScript正则表达式之multiline属性的应用，包括了JavaScript正则表达式之multiline属性的应用的使用技巧和注意事项，需要的朋友参考一下  多行正则表达式是对象的只读布尔属性。它指定是否一个特定的正则表达式进行多行匹配，即，不管是否使用“m”属性创建。 语法 下面是参数的详细信息：     NA 返回值: 如果“m”修改被设置返回“TRUE”，否则返回

  • JavaScript + Unicode正则表达式

    问题内容： 如何在JavaScript中使用支持Unicode的正则表达式？ 例如，应该有类似的东西可以匹配Letters或Marks类别中的任何代码点（而不仅仅是ASCII的），并且希望具有这样的过滤器来标点，等等。 问题答案： ES 6的情况 即将发布的ECMAScript语言规范，版本6，包含可识别Unicode的正则表达式。必须使用u正则表达式上的修饰符启用支持。请参阅ES6中支持Unic

  • 15-JavaScript-正则表达式

    正则练习 1.生成一个正则表达式regexObj 描述字符串规则的表达式，两种方式 直接量： /pattren/attrs(/规则/属性) 对象构造方式：new RegExp(pattern,arrtes) (/规则/属性) 2.regexObj.test(str) 测试正则表达式regexObj与指定字符串是否匹配 /10086/.test('10086') //true /10086/.tes

  • javascript正则表达式简介

    本文向大家介绍javascript正则表达式简介，包括了javascript正则表达式简介的使用技巧和注意事项，需要的朋友参考一下 概述 正则表达式是事先声明一组规则，用于匹配字符串中的字符。 基本语法 元字符 在正则表达式的模式中，有一些字符是有特殊含义的，被称为元字符。元字符都是针对单个字符匹配的。 \w 匹配大小写英文字符及数字 0 到 9 之间的任意一个及下划线，相当于 [a-zA-Z0-

相关阅读

JavaScript 正则表达式(笔记)学习JavaScript正则表达式Javascript的表单验证-揭开正则表达式的面纱JavaScript正则表达式的正面印象反斜杠-正则表达式-Javascript

相关文章

Ruby 正则表达式MongoDB正则表达式C#正则表达式Java正则表达式正则表达式 - 匹配规则

相关问答

正则表达式 - 正则使用求教？带正则表达式的debezium表白名单带有JavaScript的youtube url正则表达式名称的Javascript验证正则表达式特殊字符的javascript正则表达式

相关工具

正则表达式测试器WizTools.org正则表达式测试工具微擎表单验证Jquery表单验证插件FreeForm智能在线表单设计器

相关文档

正则表达式正则表达式（regular expression）Java 正则表达式教程Python 正则表达式操作指南java.util.regex 正则表达式 中文教程
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.