Based on Bootstrap 3 Form validation function of JQuery and RegExp

Yesterday the editor was studying regexp, and today the editor took a break to share form validation with everyone.

Main Function:

The username must be5-25characters within, and can only use letters, numbers or underscores, otherwise it will not pass.
The password must be5-25characters within, and can only use letters or numbers (case sensitive), otherwise it will not pass.
According to the different password strength, the background color of low, medium and high will change.
The confirmation password is not mentioned.
The verification code is just for show, anyway, it is set to have to be5numbers.
checkbox must be checked, otherwise it will not pass.
Click the registration button, and a corresponding prompt box (can be closed) will pop up.

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="验证码">
    </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">我同意<a>协议</a>/a>。</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">注册</button>
    </div>
   </div>
  </form>
 </div>
 <!--注册提示-->
 <div class="alert alert-成功警报-可取消的注册-success" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="关闭"><span aria-hidden="true">×</span></button>
  <strong>注册成功。</strong>/<strong>恭喜！</strong>
 </div>
 <div class="alert alert-危险警报-可取消的注册-failed" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="关闭"><span aria-hidden="true">×</span></button>
  <strong>注册失败。</strong>/<strong>请检查表单并重试。</strong>
 </div>
 <!--footer-->
 <footer class="text-center">Designed by <a href="http://blog.csdn.net/alenhhy" target="_blank">Alen Hu</a></footer>
</body>

RegExp part：

Username judgment：/^\w{5,25}$/g.

Password judgment：/^[a-zA-Z0-9]{5,25}$/g.

Verify code judgment：/^\d{5}$/g.

JQuery：

Username：

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;
 }
  usernameHint.html("<i class='fa fa-info-circle' aria-hidden='true'></i> From 5 to 25 characters.");
  return false;
 }
}

Password：

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").addClass("active");-w").addClass("active");
   $(".lv").addClass("active");-$(".lv").siblings().removeClass("active");
  } else if (pwdLen >= 11 && pwdLen <= 20) {
   $(".lv").addClass("active");-m").addClass("active");
   $(".lv").addClass("active");-m").siblings().removeClass("active");
  } else if (pwdLen >= 21 && pwdLen <= 25) {
   $(".lv").addClass("active");-h").addClass("active");
   $(".lv").addClass("active");-h").siblings().removeClass("active");
  }
  return true;
 }
  pwdHint.html("<i class='fa fa-info-circle' aria-hidden='true'></i> From 5 to 25 characters.");
  $(".lv").addClass("active");-w").addClass("active");
  $(".lv").addClass("active");-$(".lv").siblings().removeClass("active");
  return false;
 }
}

Confirm password:

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;
 }
  pwdConfHint.html("<i class='fa fa-info-circle' aria-hidden='true'></i> Password confirmation.");
  return false;
 }
}

Verification code:

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;
 }
  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;
 }
  return false;
 }
}

Final registration:

function register() {
 //exec checkbox
 checkBox();
 //var
 var successPanel = $(".register",-success");
 var failedPanel = $(".register-failed");
 //judge
 if (username() && pwd() && pwdConfirm() && veriCode() && checkBox()) {
  successPanel.fadeIn();
 }
  failedPanel.fadeIn();
 }
}

$("document").ready() execution:

$("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);
});

Effect picture:

DEMO:

DEMO is here, welcome to FORK:Form Validation by RegExp.

The above is what the editor introduces to everyone based on Bootstrap 3 The form validation function of JQuery and RegExp, I hope it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. I would also like to express my sincere gratitude to everyone for their support of the Yell Tutorial website!

Statement: The content of this article is from the Internet, the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report via email to codebox.com (replace # with @ when sending an email) and provide relevant evidence. Once verified, this site will immediately delete the infringing content.

Basic Tutorial