基于Bootstrap 3 JQuery及RegExp的表單驗(yàn)證功能
更新時(shí)間：2017年02月16日 11:16:45 作者：alenhhy
這篇文章主要介紹了基于Bootstrap 3 JQuery及RegExp的表單驗(yàn)證功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
昨天小編在研究regexp，今天小編抽空給大家分享表單驗(yàn)證。
主要功能：
- 用戶名必須在5-25個(gè)字符之內(nèi)，而且只能使用字母、數(shù)字或下劃線，否則不讓通過。
- 密碼必須在5-25個(gè)字符之內(nèi)，而且只能使用字母或數(shù)字（大小寫敏感），否則不讓通過。
- 根據(jù)不同密碼程度，下面的low、medium和high會(huì)改變背景顏色。
- 確認(rèn)密碼就不說啦。
- 驗(yàn)證碼只是做了個(gè)樣子，反正就是設(shè)成必須是5個(gè)數(shù)字。
- checkbox必須打勾啦，不然不讓通過。
- 點(diǎn)擊注冊按鈕，會(huì)有相應(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。
判斷驗(yàn)證碼：/^\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;
}
}
確認(rèn)密碼：
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;
}
}
驗(yàn)證碼：
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);
});
效果圖：
DEMO：
DEMO在這兒，歡迎來FORK：Form Validation by RegExp。
以上所述是小編給大家介紹的基于Bootstrap 3 JQuery及RegExp的表單驗(yàn)證功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
JS 獲取span標(biāo)簽中的值的代碼 支持ie與firefox
JS獲取span標(biāo)簽中的值的代碼，在實(shí)際應(yīng)用中經(jīng)常用的到的功能，原理很簡單，大家可以拓展下。2009-08-08
JavaScript常用數(shù)組元素搜索或過濾的四種方法詳解
這篇文章主要介紹了JavaScript常用數(shù)組元素搜索或過濾的四種方法,每種方式通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
今天項(xiàng)目中突然遇到了不太明白的寫法,下面這篇文章主要給大家介紹了關(guān)于JavaScript中.?、??、??=的用法以及含義的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
這篇文章主要介紹了JS中的三個(gè)循環(huán)小結(jié),需要的朋友可以參考下2017-06-06
微信小程序—setTimeOut定時(shí)器的問題及解決
這篇文章主要介紹了微信小程序—setTimeOut定時(shí)器的問題及解決,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了JS中parseInt()和map()用法,結(jié)合實(shí)例形式分析了parseInt()和map()方法的功能、參數(shù)、具體用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12
原生javascript單例模式的應(yīng)用實(shí)例分析
這篇文章主要介紹了原生javascript單例模式的應(yīng)用,結(jié)合實(shí)例形式分析了JavaScript單例模式的基本功能、原理、應(yīng)用及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
js 將input框中的輸入自動(dòng)轉(zhuǎn)化成半角大寫（稅號(hào)輸入框）
本文主要介紹了稅號(hào)輸入框：將input框中的輸入自動(dòng)轉(zhuǎn)化成半角大寫的方法，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
如何用JS特效顯示自己的屏幕分辨率以及屏幕尺寸呢，你會(huì)嗎？如果不會(huì)，那么下面有個(gè)不錯(cuò)的方法，大家可以參考下2013-11-11
最近接到需求,在小程序內(nèi)部長按識(shí)別二維碼添加個(gè)人微信,下面這篇文章主要給大家分析介紹了關(guān)于微信小程序長按識(shí)別二維碼的幾種情況,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08