Getting started with jquery validate form verification, jqueryvalidate

Source: Internet
Author: User
Tags api manual

Getting started with jquery validate form verification, jqueryvalidate

1. jQuery Validate plug-in Introduction

The jQuery Validate plug-in provides powerful form verification functions to simplify form verification on the client side. It also provides a large number of custom options to meet various application needs. This plug-in is bundled with a set of useful verification methods, including URL and email verification, and provides an API for Writing user-defined methods. All bundling methods use English as the error message by default and have been translated into 37 other languages.

This plug-in was compiled and maintained by J örn Zaefferer. He is a member of the jQuery team, the main developer of the jQuery UI team, and the maintenance personnel of QUnit.

  • Official Website:Http://bassistance.de/jquery-plugins/jquery-plugin-validation/
  • Online Documentation:Http://docs.jquery.com/Plugins/Validation
  • Online API:Http://jquery.bassistance.de/api-browser/plugins.html

II. Introduction to features of jQuery Validate

JQuery Validate has the following features:

(1) built-in verification rules;

Powerful jQuery Form Verification plug-in, suitable for daily E-mail, phone number, URL verification and Ajax verification, in addition to its own rich verification rules, you can also add custom verification rules.

Compatible with IE 6 +, Chrome, Firefox, Safari, and Opera 10 +

(2) custom verification rules;

(3) simple and powerful information tips.

(4) Real-time verification: the verification is triggered through the keyup or blur event, not only when the verification is submitted.
Iii. Simple example to learn jQuery Validate 

The prerequisites for these examples are to introduce the jQuery library and Validation plug-in.

 <script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script> <script type="text/javascript" src="../../dist/jquery.validate.js"></script>

1. Use plug-ins for some simple verification

<Html> 

The effect is as follows:

The above verification explanation:
1), first need to introduce the jquery-1.11.1.js, because this plug-in is based on JQuery.
2) introduce the validation plug-in jquery. validate. js.
3) introduce the prompt localization script. The verification information is internationalized. By default, the verification prompt is in English. You can import the international file that has been written by validation to internationalize it. Change the error/correct message display style.
4) Add the type to be verified in the class attribute of the input box. Verify the encoding rules for different fields and set the corresponding attributes of the fields.

Some verifiable rule types are as follows:

(1) required: true mandatory field (2) remote: "check.shtml" use ajax to call check.shtml to verify the input value (3) email: true must enter an email in the correct format (only the format can be verified, validity is not guaranteed) (4) url: true must enter the url in the correct format (5) date: true must enter the date in the correct format (6) dateISO: true: Enter the date (ISO) in the correct format. For example, 2009-06-23,1998/01/22 only verifies the format and does not validate the validity (7) number: true: a valid number (negative, decimal) (8) digits: true: an integer (9) creditcard: a valid credit card number (10) must be entered: "# field" must be the same as # field (11) accept: enter a string with a valid suffix (the suffix of the uploaded file) (12) maxlength: 5 string with a maximum input length of 5 (one character for Chinese characters) (13) minlength: 10 string with a minimum input length of 10 (one character for Chinese characters) (14) rangelength: [5, 10] The input length must be a string between 5 and 10 ") (one character for Chinese characters) (15) range: [5, 10] The input value must be between 5 and 10 (16) max: 5 input values cannot be greater than 5 (17) min: 10 input values cannot be less than 10

5) determine the form to be verified

<script type="text/javascript">////<![CDATA[$(document).ready(function(){ $("#commentForm").validate();});//]]></script>

The above is an introduction to jquery validate form verification. I hope it will be helpful to you.

Articles you may be interested in:
  • Getting started with jquery validate. js Form Verification
  • Jquery. validate Introduction Part 3
  • Step 4 of jquery validate Introduction
  • Jquery. validate Step 5 Regular Expression Verification
  • JQuery validate Chinese API attached validate. js Chinese api Manual
  • JQuery extension Validate-4: Set the error message Style
  • Validation of JQuery extension Validate-6 radio, checkbox, and select
  • JQuery EasyUI API Chinese Document-ValidateBox verification box
  • Usage of jQuery. Validate verification Library
  • Form Verification Based on Bootstrap + jQuery. validate

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.