Alen Hu
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("");
return true;
} else {
usernameHint.html(" 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("");
//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(" 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("");
return true;
} else {
pwdConfHint.html(" 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("");
return true;
} else {
veriCodeHint.html(" 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的表单验证功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
文章题目：如何实现基于Bootstrap3JQuery及RegExp的表单验证功能
文章地址：http://bjjierui.cn/article/ieojhs.html
