基于Bootstrap 3 JQuery及RegExp的表單驗證功能

2019-11-19 17:33:06

字體：大中小

供稿：網(wǎng)友

昨天小編在研究regexp，今天小編抽空給大家分享表單驗證。

主要功能：

用戶名必須在5-25個字符之內(nèi)，而且只能使用字母、數(shù)字或下劃線，否則不讓通過。
密碼必須在5-25個字符之內(nèi)，而且只能使用字母或數(shù)字（大小寫敏感），否則不讓通過。
根據(jù)不同密碼程度，下面的low、medium和high會改變背景顏色。
確認密碼就不說啦。
驗證碼只是做了個樣子，反正就是設(shè)成必須是5個數(shù)字。
checkbox必須打勾啦，不然不讓通過。
點擊注冊按鈕，會有相應(yīng)的提示框（可關(guān)閉）彈出。

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'>        <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">×</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">×</span></button>  <strong>Register Failed.</strong> Please check the form and try again. </div> <!--footer--> <footer class="text-center">Designed by <a  target="_blank">Alen Hu</a></footer></body>

RegExp部分：

判斷用戶名：/^/w{5,25}$/g。

判斷密碼：/^[a-zA-Z0-9]{5,25}$/g。

判斷驗證碼：/^/d{5}$/g。

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; }}

checkbox：

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()執(zhí)行：

$(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);});

效果圖：