首页
所有分类
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编程起步（第六课）
Feb 27 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
JS基于设计模式中的单例模式（Singleton）实现封装对数据增删改查功能
Feb 06 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
Android Gradle(1) Spring Security(2) XDM(3) Kotlin(1) redis(3) promise(2) AOP(2) 记事本(1) 验证表达式(1) 动态权限(1)
You might like
php检测图片主要颜色的方法
2015/07/01 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
php实现登录页面的简单实例
2019/09/29 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
JavaScript基本对象
2007/01/11 Javascript
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
jquery实现异步加载图片（懒加载图片一种方式）
2017/04/24 jQuery
node.js操作mysql简单实例
2017/05/25 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
JSON在Javascript中的使用（eval和JSON.parse的区别）详细解析
2017/09/05 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
python中定义结构体的方法
2013/03/04 Python
详细介绍Python中的偏函数
2015/04/27 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
python图片验证码生成代码
2016/07/02 Python
Python有序字典简单实现方法示例
2017/09/28 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
python利用opencv保存、播放视频
2020/11/02 Python
万得城电器土耳其网站：欧洲第一大电子产品零售商
2016/10/07 全球购物
英国最大线上综合鞋类商城：Office
2017/12/08 全球购物
英国书籍、CD、DVD和游戏的第一道德零售商：Awesome Books
2020/02/22 全球购物
经典c++面试题三
2015/07/08 面试题
查询优化的一般准则有哪些
2015/03/08 面试题
MySQL面试题
2014/01/12 面试题
大学生工作自荐书
2014/06/16 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL