首页
所有分类
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 相关文章推荐
表单提交验证类
Jul 14 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
js实现文章目录索引导航(table of content)
May 10 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 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
kafka(2) 数据加密(1) HDR(1) pycryto(1) 曝光融合(1) 有序排列(1) shell脚本(1) key(1) 连接器(1) 公共键(1)
You might like
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
详解小程序开发经验：多页面数据同步
2019/05/18 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Python引用模块和查找模块路径
2016/03/17 Python
Python中类的初始化特殊方法
2017/12/01 Python
django_orm查询性能优化方法
2018/08/20 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
英国马莎百货官网：Marks & Spencer
2016/07/29 全球购物
路易威登和香奈儿手袋：LuxeDH
2017/01/12 全球购物
Office DEPOT法国官网：欧迪办公用品采购
2018/01/03 全球购物
金融行业务员的自我评价
2013/12/13 职场文书
爱情检讨书大全
2014/01/21 职场文书
大学生活动策划方案
2014/02/10 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
教师产假请假条
2014/04/10 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
企业活动策划方案
2014/06/02 职场文书
在校生证明
2015/06/17 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
Java数组与堆栈相关知识总结
2021/06/29 Java/Android