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


Posted in Javascript onFebruary 16, 2017

昨天小编在研究regexp,今天小编抽空给大家分享表单验证。

主要功能:

  1. 用户名必须在5-25个字符之内,而且只能使用字母、数字或下划线,否则不让通过。
  2. 密码必须在5-25个字符之内,而且只能使用字母或数字(大小写敏感),否则不让通过。
  3. 根据不同密码程度,下面的low、medium和high会改变背景颜色。
  4. 确认密码就不说啦。
  5. 验证码只是做了个样子,反正就是设成必须是5个数字。
  6. checkbox必须打勾啦,不然不让通过。
  7. 点击注册按钮,会有相应的提示框(可关闭)弹出。

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);
});

效果图:

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

DEMO:

DEMO在这儿,欢迎来FORK:Form Validation by RegExp。

以上所述是小编给大家介绍的基于Bootstrap 3 JQuery及RegExp的表单验证功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
js实现不重复导入的方法
Mar 02 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
js 根据对象数组中的属性进行排序实现代码
Sep 12 Javascript
js模态对话框使用方法详解
Feb 16 #Javascript
javascript获取以及设置光标位置
Feb 16 #Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 #Javascript
浅谈$_FILES数组为空的原因
Feb 16 #Javascript
原生js实现秒表计时器功能
Feb 16 #Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 #Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 #Javascript
You might like
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
php实现的双向队列类实例
2014/09/24 PHP
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
4s客服专员岗位职责
2013/12/01 职场文书
会计学个人自荐信模板
2013/12/13 职场文书
研修第一天随笔感言
2014/02/15 职场文书
公司任命书范本
2014/06/04 职场文书
五五普法心得体会
2014/09/04 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
面试通知短信
2015/04/20 职场文书
远程教育培训心得体会
2016/01/09 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS