基于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 相关文章推荐
jQuery 操作XML入门
Dec 25 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
JS中表单的使用小结
Jan 11 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
详解vue-router传参的两种方式
Sep 10 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
?繁体转换的class
2006/10/09 PHP
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
DOM 基本方法
2009/07/18 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
python文件与目录操作实例详解
2016/02/22 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
python 进程池pool使用详解
2020/10/15 Python
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
本溪关门山导游词
2015/02/09 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
Python实现信息管理系统
2022/06/05 Python