Bootstrap verwendet „Validate', um eine einfache Verifizierungsfunktion zu implementieren-PHP开发-php.cn

Bootstrap verwendet „Validate', um eine einfache Verifizierungsfunktion zu implementieren
高洛峰
Freigeben： 2017-01-03 17:30:51
Original
1873 Leute haben es durchsucht
Das Beispiel in diesem Artikel teilt die Bootstrap-Validierungsüberprüfungsfunktion als Referenz. Der spezifische Inhalt lautet wie folgt:
<!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>
Nach dem Login kopieren
Das Obige ist der gesamte Inhalt dieses Artikels Ihre Studie. Duoduo unterstützt die chinesische PHP-Website.
Weitere Artikel zum Thema Bootstrap mit Validierung zur Implementierung einfacher Verifizierungsfunktionen finden Sie auf der chinesischen PHP-Website!