首页>>表单>>简单实用性强的JQ表单验证(2014-10-12)

简单实用性强的JQ表单验证

简单实用性强的JQ表单验证
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form id="form-signup_v1"  
  2.       name="form-signup_v1"  
  3.       method="POST"  
  4.       class="validation-form-container">  
  5.   
  6.     <div class="field">  
  7.         <label for="signup_v1-username">Username</label>  
  8.         <div class="ui left labeled input">  
  9.   
  10.             <input id="signup_v1-username"  
  11.                    name="signup_v1[username]"  
  12.                    type="text"  
  13.                    data-validation="[L>=6, L<=18, MIXED]"  
  14.                    data-validation-message="$ must be between 6 and 18 characters. No special characters allowed."  
  15.                    data-validation-regex="/admin/i"  
  16.                    data-validation-regex-message="The word "Admin" is not allowed in the $" >  
  17.   
  18.             <div class="ui corner label">  
  19.                 <i class="asterisk icon">*</i>  
  20.             </div>  
  21.         </div>  
  22.     </div>  
  23.     <div class="field">  
  24.         <label for="signup_v1-password">Password</label>  
  25.         <div class="ui left labeled input">  
  26.   
  27.             <input id="signup_v1-password"  
  28.                    name="signup_v1[password]"  
  29.                    type="password" data-validation="[L>=6]"  
  30.                    data-validation-message="$ must be at least 6 characters">  
  31.   
  32.             <div class="ui corner label">  
  33.                 <i class="asterisk icon">*</i>  
  34.             </div>  
  35.         </div>  
  36.     </div>  
  37.     <div class="field">  
  38.         <label for="signup_v1-password-confirm">Confirm Password</label>  
  39.         <div class="ui left labeled input">  
  40.   
  41.             <input id="signup_v1-password-confirm"  
  42.                    name="signup_v1[password-confirm]"  
  43.                    type="password"  
  44.                    data-validation="[V==signup_v1[password]]"  
  45.                    data-validation-message="$ does not match the password">  
  46.   
  47.             <div class="ui corner label">  
  48.                 <i class="asterisk icon">*</i>  
  49.             </div>  
  50.         </div>  
  51.     </div>  
  52.     <div class="field">  
  53.         <label for="signup_v1-email">Email</label>  
  54.         <div class="ui left labeled input">  
  55.   
  56.             <input id="signup_v1-email"  
  57.                    name="signup_v1[email]"  
  58.                    type="text"  
  59.                    data-validation="[EMAIL]">  
  60.   
  61.             <div class="ui corner label">  
  62.                 <i class="asterisk icon">*</i>  
  63.             </div>  
  64.         </div>  
  65.     </div>  
  66.     <div class="field">  
  67.         <label for="signup_v1-email-confirm">Confirm Email</label>  
  68.         <div class="ui left labeled input">  
  69.   
  70.             <input id="signup_v1-email-confirm"  
  71.                    name="signup_v1[email-confirm]"  
  72.                    type="text"  
  73.                    data-validation="[V==signup_v1[email]]"  
  74.                    data-validation-message="$ does not match the email">  
  75.   
  76.             <div class="ui corner label">  
  77.                 <i class="asterisk icon">*</i>  
  78.             </div>  
  79.         </div>  
  80.     </div>  
  81.   
  82.     <input type="submit" class="ui blue submit button" value="Sign up!">  
  83.   
  84.     <button id="prefill-signup_v1" type="button" class="ui mini basic button">  
  85.         Prefill  
  86.     </button>  
  87.   
  88. </form>  
  89.   
  90. <script>  
  91.   
  92.     $('#form-signup_v1').validate({  
  93.         submit: {  
  94.             settings: {  
  95.                 inputContainer: '.field'  
  96.             },  
  97.             callback: {  
  98.                 onBeforeSubmit: function (node) {  
  99.   
  100.                     myBeforeSubmitFunction(':D', ':)', node);  
  101.   
  102.                 },  
  103.                 onSubmit: function (node) {  
  104.   
  105.                     console.log('#' + node.id + ' has a submit override.');  
  106.   
  107.                     //node.submit();  
  108.   
  109.                 }  
  110.             }  
  111.         },  
  112.         debug: true  
  113.     });  
  114.   
  115.     function myBeforeSubmitFunction(a, b, node) {  
  116.   
  117.         console.log(a, b);  
  118.   
  119.         $(node).find('input:not([type="submit"]), select, textarea').attr('readonly', 'true');  
  120.         $(node).append('<div class="ui active loader"></div>');  
  121.   
  122.     }  
  123.   
  124.     $('#prefill-signup_v1').on('click', function () {  
  125.   
  126.         var form = $(this).closest('form');  
  127.   
  128.         form.find('#signup_v1-name').val('John Doe');  
  129.         form.find('#signup_v1-username').val('RocketJoe');  
  130.         form.find('#signup_v1-password').val('test123');  
  131.         form.find('#signup_v1-password-confirm').val('test123');  
  132.         form.find('#signup_v1-email').val('test@freejs.test');  
  133.         form.find('#signup_v1-email-confirm').val('test@freejs.test');  
  134.   
  135.     });  
  136.   
  137. </script>  

 


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