昨天小编在研究regexp，今天小编抽空给大家分享表单验证。
主要功能：
用户名必须在5-25个字符之内，而且只能使用字母、数字或下划线，否则不让通过。
密码必须在5-25个字符之内，而且只能使用字母或数字（大小写敏感），否则不让通过。
根据不同密码程度，下面的low、medium和high会改变背景颜色。
确认密码就不说啦。
验证码只是做了个样子，反正就是设成必须是5个数字。
checkbox必须打勾啦，不然不让通过。
点击注册按钮，会有相应的提示框（可关闭）弹出。
HTML:
<body> <div> <form> <!--username--> <div> <label>Username</label> <div> <input type="text" placeholder="Letters, numbers or underline."> </div> <div> <span></span> </div> <div></div> </div> <!--pwd--> <div> <label>Password</label> <div> <input type="password" placeholder="Letters or numbers. Case sensitive."> </div> <div> <span></span> </div> <div> <div>Weak</div> <div>Medium</div> <div>High</div> </div> </div> <!--confirm pwd--> <div> <label>Confirm Password</label> <div> <input type="password" placeholder="Confirm Password"> </div> <div> <span></span> </div> </div> <!--veri code--> <div> <label>Verification Code</label> <div> <input type="text" placeholder="Verification Code"> </div> <div> <img src='https://i1.piimg.com/583742/0be543234dae3f08.jpg'> <i aria-hidden="true"></i> </div> <div> <span></span> </div> </div> <!--agreement--> <div> <div> <div> <label> <input type="checkbox"> I agree with the <a>agreement</a>. </label> </div> </div> </div> <!--buttons--> <div> <div> <button type="button">Register</button> </div> </div> </form> </div> <!--Register Hints--> <div role="alert"> <button type="button" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Register Succeeded.</strong> congratulations! </div> <div role="alert"> <button type="button" 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>Designed by <a href="https://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 aria-hidden='true'></i>"); return true; } else { usernameHint.html("<i 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 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 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 aria-hidden='true'></i>"); return true; } else { pwdConfHint.html("<i aria-hidden='true'></i> Password confirmation."); return false; } }
验证码：