JavaScript—— 案例：表单验证

Posted 2022-12-31 sylys

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>

 

//获取文本框
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");

//
txtQQ.onblur = function () 
  //获取当前文本框对应的span
  var span = this.nextElementSibling;
  var reg = /^\d5,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 = /^\d4-\d1,2-\d1,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: /^\d5,12$/,
    tip: "请输入正确的QQ"
  ,
  
    name: ‘email‘,
    reg: /^\w+@\w+\.\w+(\.\w+)?$/,
    tip: "请输入正确的邮箱地址"
  ,
  
    name: ‘phone‘,
    reg: /^\d11$/,
    tip: "请输入正确的手机号码"
  ,
  
    name: ‘date‘,
    reg: /^\d4-\d1,2-\d1,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;