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

bootstrap使用validate实现简单校验功能

Posted in Javascript onDecember 02, 2016

本文实例为大家分享了bootstrap validate校验功能，供大家参考，具体内容如下

<!DOCTYPE html> 
<html lang="zh-CN"> 
 <head> 
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
 <title>Bootstrap 101 Template</title> 
 <!--导包--> 
 <script src="../js/jquery-1.11.3.min.js"></script> 
 <script src="../js/bootstrap.min.js"></script> 
 <link href="../css/bootstrap.min.css" rel="stylesheet"> 
 <script type="text/javascript" src="../js/jquery.validate.min.js" ></script> 
 <!--校验--> 
 <script> 
 /* $(function(){ 
 //校验 
 $("#f1").validate({ 
  rules:{ 
  username:{ 
  required:true, 
  }, 
  password:{ 
  required:true, 
  rangelength:[6,16] 
  }, 
  repassword:{ 
  equalTo:$("input[name='password']") 
  } 
  }, 
  messages:{ 
  username:{ 
  required:"请输入用户名" 
  }, 
  password:{ 
  required:"请输入密码", 
  rangelength:[6,16] 
  }, 
  repassword:{ 
  equalTo:"两次密码不同哦" 
  } 
  } 
 }); 
 })*/ 
 
 //自定义校验 
 $(function(){ 
 $.validator.addMethod("check",function(param,ele,value){ 
  //获取到ele的爷节点 
  var e=ele.parentNode.parentNode; 
    
  //先判断输入是否正确 
  if(param!=null && param.length<=16 &¶m.length>=6) 
  { 
  //当不为空,并且长度在6和16之间时代表输入正确,将颜色变为绿色的样式 
  //由于ele是JavaScript对象,所以如果要用jQuery的话需要包一下 
  // $(e).prop("class",$(e).prop("class")+" has-success"); 
//  e.cclassName="form-group"; 
  //将样式清空 
  $(e).prop("class","form-group"); 
  //追加样式 
  e.className+=" has-success"; 
  return true; 
  }else{ 
  //js方法将样式清空 
  e.setAttribute("class","form-group"); 
//  $(e).prop("class","form-group"); 
  //错误了,修改样式 
  e.className+=" has-error"; 
  //清空后还原样式 
  return false; 
  } 
 }) 
  
 $("#f1").validate({ 
  rules:{ 
  username:{ 
  check:true, 
  }, 
  password:{ 
  check:true 
  }, 
  repassword:{ 
  equalTo:$("input[name='password']") 
  } 
  }, 
  messages:{ 
  username:{ 
  check:"请输入用户名并且长度在6-16位之间" 
  }, 
  password:{ 
  check:"请输入密码并且长度在6-16位之间", 
  rangelength:[6,16] 
  }, 
  repassword:{ 
  equalTo:"两次密码不同哦" 
  } 
  } 
  
 }) 
 }) 
 </script> 
 <style> 
 /*提示的颜色*/ 
 .form-group .error{ 
 color: red; 
 } 
 </style> 
 </head> 
 <body> 
 <div class="container"> 
 <!--第一行--> 
 <div class="row"> 
 <div class="col-sm-4"><img src="../img/logo2.png"/></div> 
 <div class="col-sm-4"><img src="../img/header.png"></div> 
 <div class="col-sm-4" style="margin-top: 10px;"> 
 <!--登录注册购物车--> 
 <a href="" class="btn btn-primary">登录</a> 
 <a href="" class="btn btn-primary">注册</a> 
 <a href="" class="btn btn-danger">购物车</a> 
 </div> 
 </div> 
 
 <!--第二行 导航栏--> 
 <div class="row"> 
 <nav class="navbar navbar-default navbar-inverse"> 
  <div class="container-fluid"> 
  <!-- Brand and toggle get grouped for better mobile display --> 
  <div class="navbar-header"> 
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
  <span class="sr-only">Toggle navigation</span> 
  <span class="icon-bar"></span> 
  <span class="icon-bar"></span> 
  <span class="icon-bar"></span> 
  </button> 
  <a class="navbar-brand" href="#">首页</a> 
  </div> 
  
  <!-- Collect the nav links, forms, and other content for toggling --> 
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
  <ul class="nav navbar-nav"> 
  <li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li> 
  <li><a href="#">电脑办公</a></li> 
  <li class="dropdown"> 
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a> 
  <ul class="dropdown-menu"> 
  <li><a href="#">电影</a></li> 
  <li><a href="#">风云</a></li> 
  <li><a href="#">你的名字</a></li> 
  <li role="separator" class="divider"></li> 
  <li><a href="#">龙猫</a></li> 
  <li role="separator" class="divider"></li> 
  <li><a href="#">更多链接</a></li> 
  </ul> 
  </li> 
  </ul> 
  <form class="navbar-form navbar-right" role="search"> 
  <div class="form-group"> 
  <input type="text" class="form-control" placeholder="Search"> 
  </div> 
  <button type="submit" class="btn btn-default">Submit</button> 
  </form> 
  </div><!-- /.navbar-collapse --> 
  </div><!-- /.container-fluid --> 
 </nav> 
 </div> 
 
 <!--banner注册主体--> 
 <div class="row" style="background-image: url(../img/regist_bg.jpg);"> 
 <div class="col-sm-8 col-sm-offset-2" style="border: 7px gainsboro solid; background-color: white;"> 
  <div class="row" style="margin-top: 5px;"> 
  <div class="col-sm-offset-1"><a href=""><b><font size="4">用户注册</font></b></a></div> 
  </div> 
  
  <div class="row"> 
  <div class="col-sm-9 col-sm-offset-1"> 
  <form class="form-horizontal" id="f1"> 
   <div class="form-group"> 
   <label for="inputEmail3" class="col-sm-2 control-label">用户名</label> 
   <div class="col-sm-10"> 
   <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名"> 
   </div> 
   </div> 
   <div class="form-group"> 
   <label for="inputPassword3" class="col-sm-2 control-label">密码</label> 
   <div class="col-sm-10"> 
   <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"> 
   </div> 
   </div> 
   
   <div class="form-group"> 
   <label for="inputPassword3" class="col-sm-2 control-label">确认密码</label> 
   <div class="col-sm-10"> 
   <input type="password" class="form-control" id="repassword" name="repassword" placeholder="请输入确认密码"> 
   </div> 
   
   </div> 
   <div class="form-group"> 
   <label for="inputPassword3" class="col-sm-2 control-label">Email</label> 
   <div class="col-sm-10"> 
   <input type="text" class="form-control" id="email" name="email" placeholder="请输入email"> 
   </div> 
   </div> 
   
   <div class="form-group"> 
   <label for="inputPassword3" class="col-sm-2 control-label">姓名</label> 
   <div class="col-sm-10"> 
   <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名"> 
   </div> 
   </div> 
   
   <div class="form-group"> 
   <label for="inputPassword3" class="col-sm-2 control-label">性别</label> 
   <div class="col-sm-10" style="margin-top: 5px;"> 
   <input type="radio" checked="checked" id="man" name="man">男 
   <input type="radio" id="woman" name="woman">女 
   </div> 
   </div> 
   
   <div class="form-group"> 
   <div class="col-sm-offset-2 col-sm-10"> 
   <button type="submit" class="btn btn-danger">注册</button> 
   </div> 
   </div> 
   </form> 
  
  </div> 
  </div> 
 </div> 
 </div> 
 
 <!--底部--> 
 <div class="row" style="margin-top: 20px;"> 
 <div class="col-xs-12"><img src="../img/footer.jpg"/ width="100%"></div> 
 </div> 
 <!--联系我们--> 
 <div class="row"> 
 <div class="col-xs-12 text-center"> 
 <ul class="list-inline"> 
  <li><a href="#">关于我们</a></li> 
  <li><a href="#">关于我们</a></li> 
  <li><a href="#">关于我们</a></li> 
  <li><a href="#">关于我们</a></li> 
  <li><a href="#">关于我们</a></li> 
  <li><a href="#">关于我们</a></li> 
  <li><a href="#">关于我们</a></li> 
  <li><a href="#">关于我们</a></li> 
  <li><a href="#">关于我们</a></li> 
  <li><a href="#">关于我们</a></li> 
 </ul> 
 </div> 
 </div> 
 <!--版权信息--> 
 <div class="row"> 
 <div class="col-xs-12 text-center"> 
 Copyright © 2014-2017 御影年华版权所有 
 </div> 
 </div> 
 </div> 
 
 </body> 
</html>

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

bootstrap使用validate实现简单校验功能

- Author -

御影年华

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

Javascript 相关文章推荐
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
javascript学习笔记（八）正则表达式
Oct 08 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 Javascript
在网页中插入百度地图的步骤详解
Dec 02 #Javascript
PHP获取当前页面完整URL的方法
Dec 02 #Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 #Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 #Javascript
jquery实现图片列表鼠标移入微动
Dec 01 #Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 #Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 #Javascript
shell(3) 反向代理(2) 压力测试(1) 二级域名(1) 防盗链(1) 默认端口(3) 负载均衡(6) 生成缩略图(1) 前后端分离(1) reload(1)
You might like
php公用函数列表[正则]
2007/02/22 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
php post换行的方法
2020/02/03 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
python实现飞机大战小游戏
2019/11/08 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
Django多数据库联用实现方法解析
2020/11/12 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
Antonioli美国在线商店：时尚前卫奢华
2019/07/29 全球购物
三星印度官网：Samsung印度
2019/08/03 全球购物
学习之星事迹材料
2014/05/17 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
稽核岗位职责
2015/02/10 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
Python max函数中key的用法及原理解析
2021/06/26 Python
nginx服务器的下载安装与使用详解
2021/08/02 Servers
十大公认最好看的动漫：《咒术回战》在榜，《钢之炼金术师》第一
2022/03/18 日漫