国产精品一区二区久久国产,18岁日韩内射颜射午夜久久成人,亚洲欧美牲交

Home

php教程

PHP開發(fā)

bootstrap uses validate to implement simple verification function

高洛峰

Jan 03, 2017 pm 05:30 PM

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的爺節(jié)點 
  var e=ele.parentNode.parentNode; 
     
  //先判斷輸入是否正確 
  if(param!=null && param.length<=16 &?m.length>=6) 
  { 
  //當不為空,并且長度在6和16之間時代表輸入正確,將顏色變?yōu)榫G色的樣式 
  //由于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="#">手機數(shù)碼 <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> 
 <!--聯(lián)系我們-->
 <div> 
 <div class="col-xs-12 text-center"> 
 <ul> 
  <li><a href="#">關(guān)于我們</a></li> 
  <li><a href="#">關(guān)于我們</a></li> 
  <li><a href="#">關(guān)于我們</a></li> 
  <li><a href="#">關(guān)于我們</a></li> 
  <li><a href="#">關(guān)于我們</a></li> 
  <li><a href="#">關(guān)于我們</a></li> 
  <li><a href="#">關(guān)于我們</a></li> 
  <li><a href="#">關(guān)于我們</a></li> 
  <li><a href="#">關(guān)于我們</a></li> 
  <li><a href="#">關(guān)于我們</a></li> 
 </ul> 
 </div> 
 </div> 
 <!--版權(quán)信息-->
 <div> 
 <div class="col-xs-12 text-center"> 
 Copyright ? 2014-2017 御影年華版權(quán)所有 
 </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 of this Website

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