Getting started with jQuery Validate form validation

Getting started with jQuery Validate form validation_jquery

WBOY

Release： 2016-05-16 15:24:53

Original

1211 people have browsed it

This article describes the basic knowledge of getting started with jQuery Validate form validation. The jQuery Validate plug-in provides powerful validation functions for forms, making client-side form validation easier. It also provides a large number of customization options to meet various application requirements. Demand, the following is the entire content of this article, specially shared with everyone.

1. Import js library

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>

Copy after login

2. Default verification rules

3. Default prompt

messages: {
 required: "This field is required.",
 remote: "Please fix this field.",
 email: "Please enter a valid email address.",
 url: "Please enter a valid URL.",
 date: "Please enter a valid date.",
 dateISO: "Please enter a valid date (ISO).",
 dateDE: "Bitte geben Sie ein gültiges Datum ein.",
 number: "Please enter a valid number.",
 numberDE: "Bitte geben Sie eine Nummer ein.",
 digits: "Please enter only digits",
 creditcard: "Please enter a valid credit card number.",
 equalTo: "Please enter the same value again.",
 accept: "Please enter a value with a valid extension.",
 maxlength: $.validator.format("Please enter no more than {0} characters."),
 minlength: $.validator.format("Please enter at least {0} characters."),
 rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
 range: $.validator.format("Please enter a value between {0} and {1}."),
 max: $.validator.format("Please enter a value less than or equal to {0}."),
 min: $.validator.format("Please enter a value greater than or equal to {0}.")
},

Copy after login

If you need to modify it, you can add it to the js code:

jQuery.extend(jQuery.validator.messages, {
 required: "必选字段",
 remote: "请修正该字段",
 email: "请输入正确格式的电子邮件",
 url: "请输入合法的网址",
 date: "请输入合法的日期",
 dateISO: "请输入合法的日期 (ISO).",
 number: "请输入合法的数字",
 digits: "只能输入整数",
 creditcard: "请输入合法的信用卡号",
 equalTo: "请再次输入相同的值",
 accept: "请输入拥有合法后缀名的字符串",
 maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
 minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
 rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
 range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
 max: jQuery.validator.format("请输入一个最大为{0} 的值"),
 min: jQuery.validator.format("请输入一个最小为{0} 的值")
});

Copy after login

Recommended practice is to put this file into messages_cn.js and introduce it into the page:

4. How to use
1) Write the verification rules into the control

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>


$().ready(function() {
 $("#signupForm").validate();
});



 
  Firstname
  
 
 
 E-Mail
 
 
 
 Password
 
 
 
 确认密码

Copy after login

To use class="{}", the package must be imported: jquery.metadata.js.
You can use the following method to modify the prompt content:

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

Copy after login

When using the equalTo keyword, the following content must be enclosed in quotation marks. The code is as follows:

class="{required:true,minlength:5,equalTo:'#password'}"

Copy after login

2), write the verification rules into the js code

$().ready(function() {
 $("#signupForm").validate({
  rules: {
 firstname: "required",
 email: {
 required: true,
 email: true
 },
 password: {
 required: true,
 minlength: 5
 },
 confirm_password: {
 required: true,
 minlength: 5,
 equalTo: "#password"
 }
 },
  messages: {
 firstname: "请输入姓名",
 email: {
 required: "请输入Email地址",
 email: "请输入正确的email地址"
 },
 password: {
 required: "请输入密码",
 minlength: jQuery.format("密码不能小于{0}个字 符")
 },
 confirm_password: {
 required: "请输入确认密码",
 minlength: "确认密码不能小于5个字符",
 equalTo: "两次输入密码不一致不一致"
 }
 }
 });
});

Copy after login

messages, if a control does not have a message, the default message will be called

<form id="signupForm" method="get" action="">
 <p>
  <label for="firstname">Firstname</label>
  <input id="firstname" name="firstname" />
 </p>
 <p>
 <label for="email">E-Mail</label>
 <input id="email" name="email" />
 </p>
 <p>
 <label for="password">Password</label>
 <input id="password" name="password" type="password" />
 </p>
 <p>
 <label for="confirm_password">确认密码</label>
 <input id="confirm_password" name="confirm_password" type="password" />
 </p>
 <p>
  <input class="submit" type="submit" value="Submit"/>
 </p>
</form>

Copy after login

required:true must have a value.
required:"#aa:checked" If the value of the expression is true, verification is required.
required:function(){} returns true, indicating that validation is required.
The latter two are often used for elements in the form that need to be filled in or left out at the same time.

The above is the entire content of this article, which introduces the introductory knowledge of jQuery Validate form verification. After that, there will be an in-depth study of jQuery Validate form verification. I hope you will continue to pay attention.