时间:2021-05-25
昨天小编在研究regexp,今天小编抽空给大家分享表单验证。
主要功能:
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的表单验证功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
BootstrapValidator是为Bootstrap3设计的一款表单验证jQuery插件,非常适合基于Bootstrap框架的网站。看作者的github,
本文实例讲述了jQuery基于正则表达式的表单验证功能。分享给大家供大家参考,具体如下:
自己写的一款基于bootstrap3和jquery的分页插件,初学jquery插件写法,写的很一般。拿出来献丑了。/***基于bootstrap3的jquery
有时在我们注册账户、登陆系统时,当所有验证通过方可提交这就需要Jquery来实现表单验证,今天分享给小伙伴们一段基于Jquery实现表单验证的代码。Reg.st
本文实例讲述了jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码。分享给大家供大家参考。具体如下:这里实现圆角表单,圆角输入框,无刷新验证,