开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JavaScript表单信息验证案例——使用正则

简介: JavaScript表单信息验证案例——使用正则
+关注继续查看

展示


image


设计


首先建立我们的输入框


QQ号:<input type="text" id="txtQQ"><span></span><br>
邮箱:<input type="text" id="txtEMail"><span></span><br>
手机:<input type="text" id="txtPhone"><span></span><br>
生日:<input type="text" id="txtBirthday"><span></span><br>
姓名:<input type="text" id="txtName"><span></span><br>


建好之后就可以进行对输入的数据进行获取判断了


例如用document.getElementById("txtQQ")获取文本框,在设计一个函数进行判断


//获取文本框
var txtQQ = document.getElementById("txtQQ");
var txtEMail = document.getElementById("txtEMail");
var txtPhone = document.getElementById("txtPhone");
var txtBirthday = document.getElementById("txtBirthday");
var txtName = document.getElementById("txtName");

// qq
txtQQ.onblur = function () {
  //获取当前文本框对应的span
  var span = this.nextElementSibling;
  var reg = /^\d{5,12}$/;
  //判断验证是否成功
  if(!reg.test(this.value) ){
    //验证不成功
    span.innerText = "请输入正确的QQ号";
    span.style.color = "red";
  }else{
    //验证成功
    span.innerText = "";
    span.style.color = "";
  }
};

//txtEMail
txtEMail.onblur = function () {
  //获取当前文本框对应的span
  var span = this.nextElementSibling;
  var reg = /^\w+@\w+\.\w+(\.\w+)?$/;
  //判断验证是否成功
  if(!reg.test(this.value) ){
    //验证不成功
    span.innerText = "请输入正确的EMail地址";
    span.style.color = "red";
  }else{
    //验证成功
    span.innerText = "";
    span.style.color = "";
  }
};
/*

省略验证手机等方法

*/


但是这样写会造成代码冗余,我们可以将表单验证部分封装成一个功能函数,例如:


var regBirthday = /^\d{4}-\d{1,2}-\d{1,2}$/;
addCheck(txtBirthday, regBirthday, "请输入正确的出生日期");
//给文本框添加验证
function addCheck(element, reg, tip) {
  element.onblur = function () {
    //获取当前文本框对应的span
    var span = this.nextElementSibling;
    //判断验证是否成功
    if(!reg.test(this.value) ){
      //验证不成功
      span.innerText = tip;
      span.style.color = "red";
    }else{
      //验证成功
      span.innerText = "";
      span.style.color = "";
    }
  };
}


通过给元素增加自定义验证属性对表单进行验证:


<form id="frm">
  QQ号:<input type="text" name="txtQQ" data-rule="qq"><span></span><br>
  邮箱:<input type="text" name="txtEMail" data-rule="email"><span></span><br>
  手机:<input type="text" name="txtPhone" data-rule="phone"><span></span><br>
  生日:<input type="text" name="txtBirthday" data-rule="date"><span></span><br>
  姓名:<input type="text" name="txtName" data-rule="cn"><span></span><br>
</form>


// 所有的验证规则
var rules = [
  {
    name: 'qq',
    reg: /^\d{5,12}$/,
    tip: "请输入正确的QQ"
  },
  {
    name: 'email',
    reg: /^\w+@\w+\.\w+(\.\w+)?$/,
    tip: "请输入正确的邮箱地址"
  },
  {
    name: 'phone',
    reg: /^\d{11}$/,
    tip: "请输入正确的手机号码"
  },
  {
    name: 'date',
    reg: /^\d{4}-\d{1,2}-\d{1,2}$/,
    tip: "请输入正确的出生日期"
  },
  {
    name: 'cn',
    reg: /^[\u4e00-\u9fa5]{2,4}$/,
    tip: "请输入正确的姓名"
  }];

addCheck('frm');


//给文本框添加验证
function addCheck(formId) {
  var i = 0,
      len = 0,
      frm =document.getElementById(formId);
  len = frm.children.length;
  for (; i < len; i++) {
    var element = frm.children[i];
    // 表单元素中有name属性的元素添加验证
    if (element.name) {
      element.onblur = function () {
        // 使用dataset获取data-自定义属性的值
        var ruleName = this.dataset.rule;
        var rule =getRuleByRuleName(rules, ruleName);

        var span = this.nextElementSibling;
        //判断验证是否成功
        if(!rule.reg.test(this.value) ){
          //验证不成功
          span.innerText = rule.tip;
          span.style.color = "red";
        }else{
          //验证成功
          span.innerText = "";
          span.style.color = "";
        }
      }
    }
  }
}

// 根据规则的名称获取规则对象
function getRuleByRuleName(rules, ruleName) {
  var i = 0,
      len = rules.length;
  var rule = null;
  for (; i < len; i++) {
    if (rules[i].name == ruleName) {
      rule = rules[i];
      break;
    }
  }
  return rule;
}


完整代码


简约版


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    .fei {
      position: absolute;
      top: 100px;
      left: 100px;
    }
  </style>
</head>

<body>
  <form class="fei" id="frm">
    QQ号:<input type="text" name="txtQQ" data-rule="qq"><span></span><br>
    邮箱:<input type="text" name="txtEMail" data-rule="email"><span></span><br>
    手机:<input type="text" name="txtPhone" data-rule="phone"><span></span><br>
    生日:<input type="text" name="txtBirthday" data-rule="date"><span></span><br>
    姓名:<input type="text" name="txtName" data-rule="cn"><span></span><br>
  </form>
  <script>
    // 所有的验证规则
    var rules = [
      {
        name: 'qq',
        reg: /^\d{5,12}$/,
        tip: "请输入正确的QQ"
      },
      {
        name: 'email',
        reg: /^\w+@\w+\.\w+(\.\w+)?$/,
        tip: "请输入正确的邮箱地址"
      },
      {
        name: 'phone',
        reg: /^\d{11}$/,
        tip: "请输入正确的手机号码"
      },
      {
        name: 'date',
        reg: /^\d{4}-\d{1,2}-\d{1,2}$/,
        tip: "请输入正确的出生日期"
      },
      {
        name: 'cn',
        reg: /^[\u4e00-\u9fa5]{2,4}$/,
        tip: "请输入正确的姓名"
      }];

    addCheck('frm');


    //给文本框添加验证
    function addCheck(formId) {
      var i = 0,
        len = 0,
        frm = document.getElementById(formId);
      len = frm.children.length;
      for (; i < len; i++) {
        var element = frm.children[i];
        // 表单元素中有name属性的元素添加验证
        if (element.name) {
          element.onblur = function () {
            // 使用dataset获取data-自定义属性的值
            var ruleName = this.dataset.rule;
            var rule = getRuleByRuleName(rules, ruleName);

            var span = this.nextElementSibling;
            //判断验证是否成功
            if (!rule.reg.test(this.value)) {
              //验证不成功
              span.innerText = rule.tip;
              span.style.color = "red";
            } else {
              //验证成功
              span.innerText = "";
              span.style.color = "";
            }
          }
        }
      }
    }

    // 根据规则的名称获取规则对象
    function getRuleByRuleName(rules, ruleName) {
      var i = 0,
        len = rules.length;
      var rule = null;
      for (; i < len; i++) {
        if (rules[i].name == ruleName) {
          rule = rules[i];
          break;
        }
      }
      return rule;
    }
  </script>
</body>

</html>


豪华版


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    body {
      background: #ccc;
    }

    label {
      width: 40px;
      display: inline-block;
    }

    span {
      color: red;
    }

    .container {
      margin: 100px auto;
      width: 400px;
      padding: 50px;
      line-height: 40px;
      border: 1px solid #999;
      background: #efefef;
    }

    span {
      margin-left: 30px;
      font-size: 12px;
    }

    .wrong {
      color: red
    }

    .right {
      color: green;
    }

    .defau {
      width: 200px;
      height: 20px;
    }

    .de1 {
      background-position: 0 -20px;
    }
  </style>

</head>

<body>
  <div class="container" id="dv">
    <label for="qq">Q Q</label><input type="text" id="qq"><span></span><br />
    <label>手机</label><input type="text" id="phone"><span></span><br />
    <label>邮箱</label><input type="text" id="e-mail"><span></span><br />
    <label>座机</label><input type="text" id="telephone"><span></span><br />
    <label>姓名</label><input type="text" id="fullName"><span></span><br />
  </div>
  <script>
    function my$(id) {
      return document.getElementById(id);
    }

    //qq的
    checkInput(my$("qq"), /^\d{5,11}$/);
    //手机
    checkInput(my$("phone"), /^\d{11}$/);
    //邮箱
    checkInput(my$("e-mail"), /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
    //座机号码
    checkInput(my$("telephone"), /^\d{3,4}[-]\d{7,8}$/);
    //中文名字
    checkInput(my$("fullName"), /^[\u4e00-\u9fa5]{2,6}$/);
    //给我文本框,给我这个文本框相应的正则表达式,我把结果显示出来
    //通过正则表达式验证当前的文本框是否匹配并显示结果
    function checkInput(input, reg) {
      //文本框注册失去焦点的事件
      input.onblur = function () {
        if (reg.test(this.value)) {
          this.nextElementSibling.innerText = "正确了";
          this.nextElementSibling.style.color = "green";
        } else {
          this.nextElementSibling.innerText = "错了吧,不要乱搞!";
          this.nextElementSibling.style.color = "red";
        }
      };
    }

  </script>

</body>

</html>


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
37%的网站都在使用含有漏洞的JavaScript库
本文讲的是37%的网站都在使用含有漏洞的JavaScript库,随着客户端Web应用的日益增多,越来越多的逻辑已经开始从服务器端转移至客户端,这些逻辑通常都是使用JavaScript语言所编写。但遗憾的是,目前开发人员普遍不太关注JavaScript代码的安全性。
1703 0
前端工具 - 15个最佳的 JavaScript 表单验证库
  客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器。 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示。JavaScript 表单验证库允许开发人员自定义样式、错误消息和样式以及简化验证规则的创建。
1870 0
01 JavaScript基础教程
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hxdeng/article/details/52228498 1. JavaScript基础 1.1 JavaScript介绍 JavaScript 是互联网上最流行额脚本语言;JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。
989 0
验证(Javascript和正则表达式)
原文: 验证(Javascript和正则表达式) 昨天写了验证(C#和正则表达式),今天又写了个js版的验证。现在贴出来,为了方便自己查阅,同时也希望能给需要的人帮助和一些启发。
937 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载