如何实现基于Bootstrap3JQuery及RegExp的表单验证功能
这篇文章主要为大家展示了“如何实现基于Bootstrap 3 JQuery及RegExp的表单验证功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何实现基于Bootstrap 3 JQuery及RegExp的表单验证功能”这篇文章吧。
创新互联公司是一家集网站建设,罗田企业网站建设,罗田品牌网站建设,网站定制,罗田网站建设报价,网络营销,网络优化,罗田网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
主要功能:
用户名必须在5-25个字符之内,而且只能使用字母、数字或下划线,否则不让通过。
密码必须在5-25个字符之内,而且只能使用字母或数字(大小写敏感),否则不让通过。
根据不同密码程度,下面的low、medium和high会改变背景颜色。
确认密码就不说啦。
验证码只是做了个样子,反正就是设成必须是5个数字。
checkbox必须打勾啦,不然不让通过。
点击注册按钮,会有相应的提示框(可关闭)弹出。
HTML:
Register Succeeded. congratulations!Register Failed. Please check the form and try again.
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://ybzwz.com/article/ieojhs.html