這篇文章主要為大家展示了“如何實現基于Bootstrap 3 JQuery及RegExp的表單驗證功能”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何實現基于Bootstrap 3 JQuery及RegExp的表單驗證功能”這篇文章吧。
主要功能：
用戶名必須在5-25個字符之內，而且只能使用字母、數字或下劃線，否則不讓通過。
密碼必須在5-25個字符之內，而且只能使用字母或數字（大小寫敏感），否則不讓通過。
根據不同密碼程度，下面的low、medium和high會改變背景顏色。
確認密碼就不說啦。
驗證碼只是做了個樣子，反正就是設成必須是5個數字。
checkbox必須打勾啦，不然不讓通過。
點擊注冊按鈕，會有相應的提示框（可關閉）彈出。
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 href="http://blog.csdn.net/alenhhy" 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()執行：
$(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);
});效果圖：
以上是“如何實現基于Bootstrap 3 JQuery及RegExp的表單驗證功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
