Getting started with the basic usage of jquery validate form validation_jquery

1. Introduction to jQuery Validate plug-in

The jQuery Validate plug-in provides powerful validation functions for forms, making client-side form validation easier, while providing a large number of customization options to meet various application needs. The plugin bundles a set of useful validation methods, including URL and email validation, and provides an API for writing user-defined methods. All bundled methods use English for error messages by default and have been translated into 37 other languages.

This plugin is written and maintained by Jörn Zaefferer, a member of the jQuery team, a lead developer on the jQuery UI team, and the maintainer 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

2. Introduction to the features of jQuery Validate

jQuery Validate has the following features:

(1) Built-in verification rules;

The powerful jQuery form validation plug-in is suitable for daily verification of emails, phone numbers, URLs, etc. and Ajax verification. In addition to its own rich validation rules, you can also add custom validation rules.

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

(2) Custom verification rules;

(3) Simple, powerful information prompt.

(4) Real-time verification: Verification is triggered through keyup or blur events, not just upon submission.
3. Simple examples to learn jQuery Validate

The premise of these examples is 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 to perform some simple verifications

 
 
 <script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="../../dist/jquery.validate.js"></script>
 
 
 <script>
 $(document).ready(function(){
  $("#commentForm").validate();
 });
 </script>


 
 

 

 
表单验证
 
Name
 
E-Mail
 
URL
 
text
 

 
 
 

The effect is as follows:

Explanation of the above verification:
1) First, you need to introduce jquery-1.11.1.js, because this plug-in is based on JQuery.
2). Introduce the validation plug-in jquery.validate.js.
3), introduce prompt localization script. For the internationalization of verification information, the default verification prompt is in English. Internationalization can be achieved by importing the internationalization file that has been written by validation. Change the error/correct message display style.
4) Add the type to be verified in the class attribute of the input box. For different fields, code the verification rules and set the corresponding attributes of the fields

Some of the verifiable rule types:  

(1)required:true 必输字段 
(2)remote:"check.shtml" 使用ajax方法调用check.shtml验证输入值 
(3)email:true 必须输入正确格式的电子邮件(只能验证格式,不保证有效性) 
(4)url:true 必须输入正确格式的网址 
(5)date:true 必须输入正确格式的日期 
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性 
(7)number:true 必须输入合法的数字(负数，小数) 
(8)digits:true 必须输入整数 
(9)creditcard: 必须输入合法的信用卡号 
(10)equalTo:"#field" 输入值必须和#field相同 
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀） 
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符) 
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符) 
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) 
(15)range:[5,10] 输入值必须介于 5 和 10 之间 
(16)max:5 输入值不能大于5 
(17)min:10 输入值不能小于10

5), determine which form needs to be verified

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

The above is the introductory learning for jquery validate form validation. I hope it will be helpful to everyone's learning.