您的位置：首页 > Web前端 > BootStrap

基于Bootstrap 3 JQuery及RegExp的表单验证功能

2017-02-16 11:16 666 查看

昨天小编在研究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);
});

效果图：

DEMO：

DEMO在这儿，欢迎来FORK：Form Validation by RegExp。

以上所述是小编给大家介绍的基于Bootstrap 3 JQuery及RegExp的表单验证功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap3 jquery regexp 表单验证

相关文章推荐

新的分享

章节导航