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

2019-11-19 17:33:06

字体：大中小

来源：转载

供稿：网友

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

效果图：