首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于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的表单验证功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

alenhhy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
Node.js：Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 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
re模块(2) TimePickerView(1) watch(1) sched(1) vue-router-link(1) scss(1) 监听(2) 项目打包(2) vue-cli3.x(1) 事件调度器(1)
You might like
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
JavaScript link方法入门实例（给字符串加上超链接）
2014/10/17 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
python引用DLL文件的方法
2015/05/11 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
Python 占位符的使用方法详解
2019/07/10 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
综合办公室个人的自我评价
2013/12/22 职场文书
医院工作检讨书范文
2014/02/10 职场文书
批评与自我批评材料
2014/02/15 职场文书
经济类毕业生求职信
2014/06/26 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL