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个精彩的专题:

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

Javascript 相关文章推荐
js兼容的placeholder属性详解
Aug 18 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
JavaScript实现多重继承的方法分析
Jan 09 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
Element中Slider滑块的具体使用
Jul 29 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 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
You might like
各种咖啡的英文名子是什么
2021/03/03 新手入门
php面向对象的方法重载两种版本比较
2008/09/08 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
jquery JSON的解析方式
2009/07/25 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
详解Python当中的字符串和编码
2015/04/25 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
python 多线程重启方法
2019/02/18 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
文科生自我鉴定
2014/02/15 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL