基于Bootstrap 3、jQuery及RegExp的表单验证实现

作者：资源驿站时间：2026-10-21 22:09:44浏览：583

本文介绍如何使用Bootstrap 3、jQuery和RegExp实现前端表单验证。涵盖用户名、密码、确认密码、验证码及协议勾选的校验逻辑，包括正则表达式匹配、强度指示器颜色变化及提交提示功能。

功能概述

此前曾探讨正则表达式，今日分享一个基于前端技术的表单验证示例。

该方案主要实现以下功能：

用户名长度限制在5至25个字符，仅允许字母、数字或下划线组合，不符合规则则无法通过。
密码长度同样限制在5至25个字符，仅允许字母或数字（区分大小写），否则验证不通过。
根据密码强度不同，下方的low、medium和high区域会动态改变背景颜色以作提示。
确认密码字段需与原始密码保持一致。
验证码部分仅作演示，设定为必须输入5位数字。
协议勾选框（checkbox）必须被选中，否则无法提交。
点击注册按钮后，会弹出相应的提示框（支持关闭）以反馈结果。

HTML结构

HTML结构如下：


<body>
 <div class="container">
  <form class="form-horizontal">
   <!--username-->
   <div class="form-group">
    <label class="col-sm-3 control-label">Username</label>
    <div class="col-sm-5 control-div">
     <input type="text" class="form-control input-username" placeholder="Letters, numbers or underline.">
    </div>
    <div class="col-sm-4 control-div">
     <span class="hint hint-username"></span>
    </div>
    <div class="col-sm-offset-3 col-sm-5 count"></div>
   </div>
   <!--pwd-->
   <div class="form-group">
    <label class="col-sm-3 control-label">Password</label>
    <div class="col-sm-5 control-div">
     <input type="password" class="form-control input-pwd" placeholder="Letters or numbers. Case sensitive.">
    </div>
    <div class="col-sm-4 control-div">
     <span class="hint hint-pwd"></span>
    </div>
    <div class="col-sm-offset-3 col-sm-5 control-div pwd-judge">
     <div class="pwd-judge-lv lv-w active">Weak</div>
     <div class="pwd-judge-lv lv-m">Medium</div>
     <div class="pwd-judge-lv lv-h">High</div>
    </div>
   </div>
   <!--confirm pwd-->
   <div class="form-group">
    <label class="col-sm-3 control-label">Confirm Password</label>
    <div class="col-sm-5 control-div">
     <input type="password" class="form-control input-pwd-confirm" placeholder="Confirm Password">
    </div>
    <div class="col-sm-4 control-div">
     <span class="hint hint-pwd-confirm"></span>
    </div>
   </div>
   <!--veri code-->
   <div class="form-group">
    <label class="col-sm-3 control-label">Verification Code</label>
    <div class="col-sm-2 control-div">
     <input type="text" class="form-control input-veri-code" placeholder="Verification Code">
    </div>
    <div class="col-sm-3 control-div veri-code-img">
     <img src='http://i1.piimg.com/583742/0be543234dae3f08.jpg'> &nbsp;&nbsp;
     <i class="fa fa-refresh" aria-hidden="true"></i>
    </div>
    <div class="col-sm-4 control-div">
     <span class="hint hint-veri-code"></span>
    </div>
   </div>
   <!--agreement-->
   <div class="form-group">
    <div class="col-sm-offset-3 col-sm-10 control-div">
     <div class="checkbox">
      <label>
       <input type="checkbox" class="input-checkbox"> I agree with the <a>agreement</a>.
      </label>
     </div>
    </div>
   </div>
   <!--buttons-->
   <div class="form-group">
    <div class="col-sm-offset-3 col-sm-2 control-div">
     <button type="button" class="btn btn-success btn-register">Register</button>
    </div>
   </div>
  </form>
 </div>
 <!--Register Hints-->
 <div class="alert alert-success alert-dismissible register-success" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Register Succeeded.</strong> congratulations!
 </div>
 <div class="alert alert-danger alert-dismissible register-failed" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Register Failed.</strong> Please check the form and try again.
 </div>
 <!--footer-->
 <footer class="text-center">Designed by <a href="http://blog.csdn.net/alenhhy" target="_blank">Alen Hu</a></footer>
</body>

正则表达式定义

正则表达式部分：

用户名匹配规则：/^\w{5,25}$/g。

密码匹配规则：/^[a-zA-Z0-9]{5,25}$/g。

验证码匹配规则：/^\d{5}$/g。

jQuery验证逻辑

jQuery逻辑部分：

用户名处理逻辑：


function username() {
 //var
 var username = $(".input-username");
 var usernameVal = username.val();
 var usernameLen = usernameVal.length;
 var usernameCount = $(".count");
 var usernameHint = $(".hint-username");
 var usernameReg = /^\w{5,25}$/g;
 //username length count
 usernameCount.text(usernameLen + " characters");
 //username length judge
 if (usernameReg.test(usernameVal)) {
  usernameHint.html("<i class='fa fa-check' aria-hidden='true'></i>");
  return true;
 } else {
  usernameHint.html("<i class='fa fa-info-circle' aria-hidden='true'></i> From 5 to 25 characters.");
  return false;
 }
}

密码处理逻辑：


function pwd() {
 //var
 var pwd = $(".input-pwd");
 var pwdVal = pwd.val();
 var pwdLen = pwdVal.length;
 var pwdHint = $(".hint-pwd");
 var pwdReg = /^[a-zA-Z0-9]{5,25}$/g;
 //pwd length judge
 if (pwdReg.test(pwdVal)) {
  //turn to tick
  pwdHint.html("<i class='fa fa-check' aria-hidden='true'></i>");
  //pwd lv bgd color
  if (pwdLen >= 5 && pwdLen <= 10) {
   $(".lv-w").addClass("active");
   $(".lv-w").siblings().removeClass("active");
  } else if (pwdLen >= 11 && pwdLen <= 20) {
   $(".lv-m").addClass("active");
   $(".lv-m").siblings().removeClass("active");
  } else if (pwdLen >= 21 && pwdLen <= 25) {
   $(".lv-h").addClass("active");
   $(".lv-h").siblings().removeClass("active");
  }
  return true;
 } else {
  pwdHint.html("<i class='fa fa-info-circle' aria-hidden='true'></i> From 5 to 25 characters.");
  $(".lv-w").addClass("active");
  $(".lv-w").siblings().removeClass("active");
  return false;
 }
}

确认密码处理逻辑：


function pwdConfirm() {
 //var
 var pwd = $(".input-pwd");
 var pwdVal = pwd.val();
 var pwdConf = $(".input-pwd-confirm");
 var pwdConfVal = pwdConf.val();
 var pwdConfHint = $(".hint-pwd-confirm");
 //pwd confirm judge
 if (pwdVal === pwdConfVal) {
  pwdConfHint.html("<i class='fa fa-check' aria-hidden='true'></i>");
  return true;
 } else {
  pwdConfHint.html("<i class='fa fa-info-circle' aria-hidden='true'></i> Password confirmation.");
  return false;
 }
}

验证码处理逻辑：


function veriCode() {
 //var
 var veriCode = $(".input-veri-code");
 var veriCodeVal = veriCode.val();
 var veriCodeLen = veriCodeVal.length;
 var veriCodeHint = $(".hint-veri-code");
 var veriCodeReg = /^\d{5}$/g;
 //veri code length judge
 if (veriCodeReg.test(veriCodeVal)) {
  veriCodeHint.html("<i class='fa fa-check' aria-hidden='true'></i>");
  return true;
 } else {
  veriCodeHint.html("<i class='fa fa-info-circle' aria-hidden='true'></i> Please input CAPTCHA code.");
  return false;
 }
}

协议勾选处理逻辑：


function checkBox() {
 //var
 var checkBox = $(".input-checkbox");
 //checked
 if (checkBox.is(":checked")) {
  return true;
 } else {
  return false;
 }
}

最终注册提交逻辑：


function register() {
 //exec checkbox
 checkBox();
 //var
 var successPanel = $(".register-success");
 var failedPanel = $(".register-failed");
 //judge
 if (username() && pwd() && pwdConfirm() && veriCode() && checkBox()) {
  successPanel.fadeIn();
 } else {
  failedPanel.fadeIn();
 }
}

初始化与演示

$(document).ready()执行入口：


$(document).ready(function() {
 $(".input-username").keyup(username);
 $(".input-pwd").keyup(pwd);
 $(".input-pwd-confirm").keyup(pwdConfirm);
 $(".input-veri-code").keyup(veriCode);
 $(".btn-register").click(register);
});

运行效果展示：

功能概述