bootstrap使用validate实现简单校验功能
2016-12-02 08:49
429 查看
本文实例为大家分享了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个精彩的专题:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- SpringMVC(26):简单的json数据校验示例(实现功能:使用jQuery框架的ajax()方法来实现 userCode的校验)
- bootstrap用validate简单实现校验
- Bootstrap 与 Jquery validate 结合使用——简单实现
- 基于BootStrap与jQuery.validate实现表单提交校验功能
- C#使用命令行方式实现Ping简单功能
- 使用bitmapData简单实现涂鸦中的橡皮功能(as3)
- ASP.NET使用Cookie简单实现记住登陆状态功能
- 使用php+Ajax实现唯一校验实现代码[简单应用]
- Silverlight使用socket tcp简单实现聊天室功能
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- 使用php+Ajax实现唯一校验实现代码[简单应用]
- 用最简单的函数实现功能:判断一个int数据是否是2的x次幂(不能使用循环)。
- 在JQuery的validate功能中使用remote实现Ajax功能后台验证
- 使用jQuery简单实现产品展示的图片左右滚动功能
- 使用Hashtable实现简单缓存功能
- 一个使用监听器模式实现的J2ME网络编程框架,包括一个简单的登录功能实现(含源代码)
- 使用.htaccess实现简单的防盗链功能
- 使用Javascript实现一种简单的数字混淆功能(高手绕过)
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- ASP.NET jQuery 食谱12 (通过使用jQuery validation插件简单实现用户注册页面验证功能)