基于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 相关文章推荐
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
详解JavaScript的计时器和按钮效果设置
Feb 18 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
基于mysql的论坛(7)
2006/10/09 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
layui分页效果实现代码
2017/05/19 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
python 将md5转为16字节的方法
2018/05/29 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
python中可以声明变量类型吗
2020/06/18 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
劳动之星获奖感言
2014/02/01 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
个人德育工作总结
2015/03/05 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android