bootstrap utilise validate pour implémenter une fonction de vérification simple-PHP开发-php.cn

bootstrap utilise validate pour implémenter une fonction de vérification simple

高洛峰

Libérer： 2017-01-03 17:30:51

original

1872 Les gens l'ont consulté

L'exemple de cet article partage la fonction de vérification de validation d'amorçage pour votre référence. Le contenu spécifique est le suivant

<!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>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il vous sera utile. votre étude. J'espère également que tout le monde Duoduo prend en charge le site Web chinois PHP.

Pour plus d'articles liés au bootstrap utilisant validate pour implémenter des fonctions de vérification simples, veuillez faire attention au site Web PHP chinois !