阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.Validate 中文API文档

      插件 jQuery.Validate 中文API文档 https://github.com/DiegoLopesLima/Validate

      Coming soon: A minimalist validation library for client side and server side..

      jQuery Validate

      License: MIT.

      Version: 1.1.2.

      Requires: jQuery 1.7+.

      To use jQuery Validate you just need to include in your code a version of the jQuery library equal or more recent than 1.7 and a file with the plugin. Click here to download the plugin.

      After this, you just need select your form and calling the jQuery.fn.validate method.

      See a example:

      jQuery('form').validate();
      

      After calling the jQuery.fn.validate method, you can validate your fields using data attributes, that are valid to the HTML5, according to the W3C.

      See a example to required field:

      <form>
      	<input type="text" data-required />
      </form>
      

      jQuery Validate supports all fields of the HTML5 and uses WAI-ARIA for accessibility. You can use several attributes to your validations.

      Attributes

          <th>Description</th>
      
          <th width="75px">Default</th>
      </tr>
      
      <tr>
          <td>data-conditional</td>
      
          <td>Accepts one or more indexes separated by spaces from the `conditional` object that should contain a the boolean return function.</td>
      
          <td></td>
      </tr>
      
      <tr>
          <td>data-ignore-case</td>
      
          <td>Accepts a boolean value to specify if field is case-insensitive.</td>
      
          <td>true</td>
      </tr>
      
      <tr>
          <td>data-mask</td>
      
          <td>Accepts a mask to change the field value to the specified format. The mask should use the character groups of the regular expression passed to the <a href="#data-pattern">`data-pattern`</a> attribute.</td>
      
          <td>${0}</td>
      </tr>
      
      <tr>
          <td>data-pattern</td>
      
          <td>Accepts a regular expression to test the field value.</td>
      
          <td>/(?:)/</td>
      </tr>
      
      <tr>
          <td>data-prepare</td>
      
          <td>Accepts a index from the `prepare` object that should contain a function to receive the field value and returns a new value treated.</td>
      
          <td></td>
      </tr>
      
      <tr>
          <td>data-required</td>
      
          <td>Accepts a boolean value to specify if field is required.</td>
      
          <td>false</td>
      </tr>
      
      <tr>
          <td>data-trim</td>
      
          <td>Accepts a boolean value. If true, removes the spaces from the ends in the field value. (The field value is not changed)</td>
      
          <td>false</td>
      </tr>
      
      <tr>
          <td>data-validate</td>
      
          <td>You can use the `data-validate` to calling extensions.</td>
      
          <td></td>
      </tr>
      
      Attribute

      Parameters

          <th>Description</th>
      
          <th width="75px">Default</th>
      </tr>
      
      <tr>
          <td>conditional</td>
      
          <td>Accepts a object to store functions from validation.</td>
      
          <td></td>
      </tr>
      
      <tr>
          <td>filter</td>
      
          <td>Accepts a selector string or function to filter the validated fields.</td>
      
          <td>*</td>
      </tr>
      
      <tr>
          <td>nameSpace</td>
      
          <td>A namespace used in all delegates events.</td>
      
          <td>validate</td>
      </tr>
      
      <tr>
          <td>onBlur</td>
      
          <td>Accepts a boolean value. If true, triggers the validation when blur the field.</td>
      
          <td>false</td>
      </tr>
      
      <tr>
          <td>onChange</td>
      
          <td>Accepts a boolean value. If true, triggers the validation when change the field value.</td>
      
          <td>false</td>
      </tr>
      
      <tr>
          <td>onKeyup</td>
      
          <td>Accepts a boolean value. If true, triggers the validation when press any key.</td>
      
          <td>false</td>
      </tr>
      
      <tr>
          <td>onSubmit</td>
      
          <td>Accepts a boolean value. If true, triggers the validation when submit the form.</td>
      
          <td>true</td>
      </tr>
      
      <tr>
          <td>prepare</td>
      
          <td>Accepts a object to store functions to prepare the field values.</td>
      
          <td></td>
      </tr>
      
      <tr>
          <td>sendForm</td>
      
          <td>Accepts a boolean value. If false, prevents submit the form (Useful to submit forms via <a href="http://api.jquery.com/jQuery.ajax/" target="_blank">AJAX</a>).</td>
      
          <td>true</td>
      </tr>
      
      <tr>
          <td>waiAria</td>
      
          <td>Accepts a boolean value. If false, disables <a href="http://www.w3.org/WAI/PF/aria/" target="_blank">WAI-ARIA</a>.</td>
      
          <td>true</td>
      </tr>
      
      Parameter

      Callbacks

          <th>Description</th>
      </tr>
      
      <tr>
          <td>valid</td>
      
          <td>Accepts a function to be calling when form is valid. The context (`this`) is the current verified form and the parameters are respectively `event` and `options`.</td>
      </tr>
      
      <tr>
          <td>invalid</td>
      
          <td>Accepts a function to be calling when form is invalid. The context (`this`) is the current verified form and the parameters are respectively `event` and `options`.</td>
      </tr>
      
      <tr>
          <td>eachField</td>
      
          <td>Accepts a function to be calling to each field. The context (`this`) is the current verified field and the parameters are respectively `event`, `status` and `options`.</td>
      </tr>
      
      <tr>
          <td>eachInvalidField</td>
      
          <td>Accepts a function to be calling when field is invalid. The context (`this`) is the current verified field and the parameters are respectively `event`, `status` and `options`.</td>
      </tr>
      
      <tr>
          <td>eachValidField</td>
      
          <td>Accepts a function to be calling when field is valid. The context (`this`) is the current verified field and the parameters are respectively `event`, `status` and `options`.</td>
      </tr>
      
      Callback

      Removing validation

      You can remove validation of a form using the jQuery.fn.validateDestroy method.

      Example:

      jQuery('form').validateDestroy();
      

      Changing the default values of jQuery.fn.validate

      You can changes the default values of jQuery.fn.validate using jQuery.validateSetup method.

      Example:

      jQuery('form').validateSetup({
      	sendForm : false,
      	onKeyup : true
      });
      

      Creating descriptions

      You can create descriptions to the field states.

      Example:

      <form>
      	<input type="text" data-describedby="messages" data-description="test" />
      
      	<span id="messages"></span>
      </form>
      
      $('form').validate({
      	description : {
      		test : {
      			required : '<div class="error">Required</div>',
      			pattern : '<div class="error">Pattern</div>',
      			conditional : '<div class="error">Conditional</div>',
      			valid : '<div class="success">Valid</div>'
      		}
      	}
      });
      

      Creating extensions

      You can use the jQuery.validateExtend method to extend the validations and calling the extensions with data-validate attribute.

      Example:

      <form>
      	<input type="text" name="age" data-validate="age" />
      </form>
      
      jQuery('form').validate();
      
      jQuery.validateExtend({
      	age : {
      		required : true,
      		pattern : /^[0-9]+$/,
      		conditional : function(value) {
      
      			return Number(value) > 17;
      		}
      	}
      });
      
      目录
      目录