平武建站

如何实现基于Bootstrap3JQuery及RegExp的表单验证功能

这篇文章主要为大家展示了“如何实现基于Bootstrap 3 JQuery及RegExp的表单验证功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何实现基于Bootstrap 3 JQuery及RegExp的表单验证功能”这篇文章吧。

创新互联公司是一家集网站建设,罗田企业网站建设,罗田品牌网站建设,网站定制,罗田网站建设报价,网络营销,网络优化,罗田网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

主要功能：

  1. 用户名必须在5-25个字符之内，而且只能使用字母、数字或下划线，否则不让通过。

  2. 密码必须在5-25个字符之内，而且只能使用字母或数字（大小写敏感），否则不让通过。

  3. 根据不同密码程度，下面的low、medium和high会改变背景颜色。

  4. 确认密码就不说啦。

  5. 验证码只是做了个样子，反正就是设成必须是5个数字。

  6. checkbox必须打勾啦，不然不让通过。

  7. 点击注册按钮，会有相应的提示框（可关闭）弹出。

HTML:


 
  
   
   
    Username
    
     
    
               
    
   
            Password                                           Weak      Medium      High                      Confirm Password                                                 Verification Code                                                                                                                         Register                     ×   Register Succeeded. congratulations!       ×   Register Failed. Please check the form and try again.      Designed by Alen Hu

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的表单验证功能
如何实现基于Bootstrap 3 JQuery及RegExp的表单验证功能 
如何实现基于Bootstrap 3 JQuery及RegExp的表单验证功能 
如何实现基于Bootstrap 3 JQuery及RegExp的表单验证功能

以上是“如何实现基于Bootstrap 3 JQuery及RegExp的表单验证功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


网站标题：如何实现基于Bootstrap3JQuery及RegExp的表单验证功能
URL地址：http://pwwzsj.com/article/ieojhs.html

其他资讯