首页
所有分类
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 相关文章推荐
关于COOKIE个数与大小的问题
Jan 17 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
js浏览器html5表单验证
Oct 17 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象（五）
Jun 04 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 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
Spring-Retry(1) 多维数组(1) Sqlite(2) 多线程(6) OpenLayer(1) android studio(3) Spring Boot(5) 安卓(1) IDEA(2) 移动开发(2)
You might like
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
javascript 可以拖动的DIV（二）
2009/06/26 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
Javascript 完美运动框架(逐行分析代码，让你轻松了运动的原理)
2015/01/23 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
vue 虚拟DOM的原理
2020/10/03 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
python实现计算资源图标crc值的方法
2014/10/05 Python
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
python实现大转盘抽奖效果
2019/01/22 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
基于python实现文件加密功能
2020/01/06 Python
中国专业的综合网上购物商城：京东
2016/08/02 全球购物
Shop Apotheke瑞士：您的健康与美容网上商店
2019/10/09 全球购物
大众服装店创业计划书范文
2014/01/01 职场文书
高中班主任评语大全
2014/04/25 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
2014年平安夜寄语
2014/12/08 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
七年级话题作文之执着
2019/11/19 职场文书
windows安装python超详细图文教程
2021/05/21 Python