search

Home  >  Article  >  php教程  >  bootstrap uses validate to implement simple verification function

bootstrap uses validate to implement simple verification function

高洛峰
高洛峰Original
2017-01-03 17:30:511869browse

The example of this article shares the bootstrap validate verification function for your reference. The specific content is as follows

<!DOCTYPE html> 
<html> 
 <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=&#39;password&#39;]") 
  } 
  }, 
  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=&#39;password&#39;]") 
  } 
  }, 
  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> 
 <!--第一行-->
 <div> 
 <div><img src="../img/logo2.png"/></div> 
 <div><img src="../img/header.png"></div> 
 <div 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> 
 <nav class="navbar navbar-default navbar-inverse"> 
  <div> 
  <!-- Brand and toggle get grouped for better mobile display -->
  <div> 
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
  <span>Toggle navigation</span> 
  <span></span> 
  <span></span> 
  <span></span> 
  </button> 
  <a 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><a href="#">手机数码 <span>(current)</span></a></li> 
  <li><a href="#">电脑办公</a></li> 
  <li> 
  <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span></span></a> 
  <ul> 
  <li><a href="#">电影</a></li> 
  <li><a href="#">风云</a></li> 
  <li><a href="#">你的名字</a></li> 
  <li role="separator"></li> 
  <li><a href="#">龙猫</a></li> 
  <li role="separator"></li> 
  <li><a href="#">更多链接</a></li> 
  </ul> 
  </li> 
  </ul> 
  <form class="navbar-form navbar-right" role="search"> 
  <div> 
  <input type="text" placeholder="Search"> 
  </div> 
  <button type="submit" class="btn btn-default">Submit</button> 
  </form> 
  </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
 </nav> 
 </div> 
  
 <!--banner注册主体-->
 <div 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 style="margin-top: 5px;"> 
  <div><a href=""><b><font size="4">用户注册</font></b></a></div> 
  </div> 
   
  <div> 
  <div class="col-sm-9 col-sm-offset-1"> 
  <form id="f1"> 
   <div> 
   <label for="inputEmail3" class="col-sm-2 control-label">用户名</label> 
   <div> 
   <input type="text" id="username" name="username" placeholder="请输入用户名"> 
   </div> 
   </div> 
   <div> 
   <label for="inputPassword3" class="col-sm-2 control-label">密码</label> 
   <div> 
   <input type="password" id="password" name="password" placeholder="请输入密码"> 
   </div> 
   </div> 
    
   <div> 
   <label for="inputPassword3" class="col-sm-2 control-label">确认密码</label> 
   <div> 
   <input type="password" id="repassword" name="repassword" placeholder="请输入确认密码"> 
   </div> 
    
   </div> 
   <div> 
   <label for="inputPassword3" class="col-sm-2 control-label">Email</label> 
   <div> 
   <input type="text" id="email" name="email" placeholder="请输入email"> 
   </div> 
   </div> 
    
   <div> 
   <label for="inputPassword3" class="col-sm-2 control-label">姓名</label> 
   <div> 
   <input type="text" id="name" name="name" placeholder="请输入姓名"> 
   </div> 
   </div> 
    
   <div> 
   <label for="inputPassword3" class="col-sm-2 control-label">性别</label> 
   <div style="margin-top: 5px;"> 
   <input type="radio" checked="checked" id="man" name="man">男 
   <input type="radio" id="woman" name="woman">女 
   </div> 
   </div> 
    
   <div> 
   <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 style="margin-top: 20px;"> 
 <div><img src="../img/footer.jpg"/ width="100%"></div> 
 </div> 
 <!--联系我们-->
 <div> 
 <div class="col-xs-12 text-center"> 
 <ul> 
  <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> 
 <div class="col-xs-12 text-center"> 
 Copyright © 2014-2017 御影年华版权所有 
 </div> 
 </div> 
 </div> 
  
 </body> 
</html>

The above is the entire content of this article. I hope it will be helpful to your study and I hope you will support it. PHP Chinese website.

For more articles related to bootstrap using validate to implement simple verification functions, please pay attention to the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery implementation method to get the value of the option selected by selectNext article：jQuery implementation method to get the value of the option selected by select

Related articles

See more