基于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里四舍五入函数round用法实例
Apr 06 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
js生成word中图片处理方法
Jan 06 Javascript
浅谈React高阶组件
Mar 28 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 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
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
Python封装shell命令实例分析
2015/05/05 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
pip命令无法使用的解决方法
2018/06/12 Python
pytorch 常用线性函数详解
2020/01/15 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
秋天的怀念教学反思
2014/04/28 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
新员工入职感想
2015/08/07 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
导游词之湖北武当山
2019/09/23 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技