首页>>表单>>jQuery表单检测,提交后检测与实时检测(2019-09-18)

jQuery表单检测,提交后检测与实时检测

jQuery表单检测,提交后检测与实时检测
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="example-block mb-4">  
  2.                         <form action="" class="user-registration mb-3">  
  3.                             <h6 class="title mb-2 mt-0">User registration</h6>  
  4.                             <div class="form-group">  
  5.                                 <label>Login *</label>  
  6.                                 <input name="login" type="text" data-validation-length="min:3" class="form-control" required>  
  7.                             </div>  
  8.                             <div class="form-group">  
  9.                                 <label>Email *</label>  
  10.                                 <input name="email" type="email" class="form-control" required>  
  11.                             </div>  
  12.                             <div class="form-group">  
  13.                                 <label>Password *</label>  
  14.                                 <input name="password" type="password" class="form-control" required>  
  15.                             </div>  
  16.                             <div class="form-group">  
  17.                                 <label>Website</label>  
  18.                                 <input name="website" data-validation-type="url" class="form-control">  
  19.                             </div>  
  20.                             <div class="form-group">  
  21.                                 <label>Bio</label>  
  22.                                 <textarea name="bio" data-validation-length="min:10,max:150" data-validation-hint="Describe yourself" class="form-control"></textarea>  
  23.                             </div>  
  24.                             <div class="form-group">  
  25.                                 <label class="mb-0">I agree to the terms of service *</label>  
  26.                                 <input type="checkbox" data-validation-message="You have to agree to terms of service" required>  
  27.                             </div>  
  28.                             <div class="mb-2"><small>* required fields</small></div>  
  29.                             <button type="submit" class="btn btn-primary">Submit</button>  
  30.                         </form>  
  31.   
  32.                     </div>  

 

JavaScript Code
  1. <script>  
  2.             $(document).ready(function() {  
  3.   
  4.                 /** 
  5.                  * Initiate highlighting 
  6.                  */  
  7.   
  8.                 hljs.initHighlightingOnLoad();  
  9.   
  10.                 /** 
  11.                  * Initiate validation on each form. 
  12.                  */  
  13.   
  14.                 $('.user-registration').validation({  
  15.                     'autocomplete': 'off',  
  16.                     'liveValidation': false  
  17.                 });  
  18.   
  19.                 $('.live-validation').validation({  
  20.                     'autocomplete': 'off',  
  21.                     'liveValidation': true  
  22.                 });  
  23.   
  24.             });  
  25.         </script>  

 


原文地址:http://www.freejs.net/article_biaodan_818.html