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

最新推荐文章于 2022-03-18 18:17:36 发布

我心向阳iu

最新推荐文章于 2022-03-18 18:17:36 发布

阅读量3.1k

点赞数 1

分类专栏： # JavaScript高级文章标签： js css html vue javascript

本文链接：https://blog.csdn.net/weixin_45525272/article/details/116398380

版权

文章目录

展示
设计
完整代码
- 简约版
- 豪华版

展示

在这里插入图片描述

设计

首先建立我们的输入框

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) ){
   
      //验证不成功