I reproduced an article written by my predecessor here. I have modified it in my own understanding and only made a record.
First post the code of a large domestic company:
<script type="text/javascript">
function lang(key) {
mylang = {
'ls_input_myb': 'Please enter your account',
'ls_myb_email': 'The roaming coin account is the email address',
'ls_login_password': 'Please enter your login password',
'ls_password_length': 'Password length is between {0}-{1} bits',
'ls_input_captcha': 'Please enter the verification code',
'ls_captcha_length': 'The length of the verification code is {0} bit',
'ls_account_email': 'Account name is email address',
'':''
};
return mylang[key];
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#loginForm").validate({
rules: {
uEmail: {
required: true,
email: true
},
uPassword: {
required: true,
rangelength: [6, 30]
}
},
messages: {
uEmail: {
required: lang('ls_input_myb'),
email: lang('ls_myb_email')
},
uPassword: {
required: lang('ls_login_password'),
rangelength: $.format(lang('ls_password_length'))
}
},
errorPlacement: function(error, element) {
var placement = $(("td").parent("tr").next("tr").find("td").get(1));
('');
( placement );
},
onkeyup: false
});
var accountTipsText = lang('ls_account_email');
$("#uEmail").focus(function() {
if (!$($(this).parent().parent().next().find('td').get(1)).text()) {
$($(this).parent().parent().next().find('td').get(1)).html('<span class="font_888_8">' + accountTipsText + '</span>');
}
$(this).css('color', '#000');
}).focus();
});
</script>
I started with this example. In fact, this example contains almost the essence. If you fully understand this code, it is basically a beginning.
I remember when I used to write code to judge when I was online simulation of futures web pages. I was so naive...
The following is a complete article introduction.
Default verification rules
(1) required:true Must-win field
(2) remote:"" Use ajax method to verify the input value
(3) email:true Email in the correct format must be entered
(4)url:true The correct formatted URL must be entered.
(5)date:true The correct format date must be entered.
(6)dateISO:true The date (ISO) of the correct format must be entered, for example: 2009-06-23, 1998/01/22 Only verify the format, not validity
(7) number:true A legal number (negative number, decimal) must be entered.
(8)digits:true Integer must be entered
(9) creditcard: You must enter a legal credit card number
(10) equalTo:"#field" input value must be the same as #field
(11)accept: Enter a string with a legal suffix name (the suffix of the upload file)
(12)maxlength:5 Enter a string with a maximum length of 5 (Chinese characters are counted as one character)
(13)minlength:10 Enter a string with a minimum length of 10 (Chinese characters are counted as one character)
(14)rangelength:[5,10] The input length must be between 5 and 10") (Chinese characters count as a character)
(15)range:[5,10] The input value must be between 5 and 10
(16)max:5 The input value cannot be greater than 5
(17)min:10 The input value cannot be less than 10
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: $.("Please enter no more than {0} characters."),
minlength: $.("Please enter at least {0} characters."),
rangelength: $.("Please enter a value between {0} and {1} characters long."),
range: $.("Please enter a value between {0} and {1}."),
max: $.("Please enter a value less than or equal to {0}."),
min: $.("Please enter a value greater than or equal to {0}.")
},
If you need to modify it, you can add it to the js code:
(, {
required: "Required fields",
remote: "Please fix this field",
email: "Please enter the correct format email",
url: "Please enter a legal URL",
date: "Please enter a legal date",
dateISO: "Please enter a legal date (ISO).",
number: "Please enter a legal number",
digits: "Only input integers",
creditcard: "Please enter a legal credit card number",
equalTo: "Please enter the same value again",
accept: "Please enter a string with a legal suffix name",
maxlength: ("Please enter a string with a length of up to {0}"),
minlength: ("Please enter a string with at least {0}"),
rangelength: ("Please enter a string with length between {0} and {1}"),
range: ("Please enter a value between {0} and {1}"),
max: ("Please enter a value with a maximum of {0}"),
min: ("Please enter a value with the minimum {0}")
});
Recommended practice: put this file into messages_cn.js and introduce it in the page
<script src="../js/messages_cn.js" type="text/javascript"></script>
How to use
1. Write the verification rules to the control
<script src="../js/" type="text/javascript"></script>
<script src="../js/" type="text/javascript"></script>
<script src="./js/" type="text/javascript"></script>
$().ready(function() {
$("#signupForm").validate();
});
<form method="get" action="">
<label for="firstname">Firstname</label>
<input name="firstname" class="required" />
<label for="email">E-Mail</label>
<input name="email" class="required email" />
<label for="password">Password</label>
<input name="password" type="password" class="{required:true,minlength:5}" />
<label for="confirm_password">Confirm password</label>
<input name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
<input class="submit" type="submit" value="Submit"/>
</form>
Using class="{}", the package must be introduced:
You can use the following method to modify the prompt content:
class="{required:true,minlength:5,messages:{required:'Please enter content'}}"
When using the equalTo keyword, the following content must be quoted, as follows:
class="{required:true,minlength:5,equalTo:'#password'}"
Another way, use keywords: meta (use other plugins for metadata you want to wrap your verification rules in their own projects with this special option)
Tell the validation plugin to look inside a validate-property in metadata for validation rules.
For example:
meta: "validate"
<input name="password" type="password" class="{validate:{required:true,minlength:5}}" />
Another way:
$.("attr", "validate");
This way you can use validate="{required:true}" or class="required", but class="{required:true,minlength:5}" will not work
2. Write the verification rules into the 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: "Please enter your name",
email: {
required: "Please enter the email address",
email: "Please enter the correct email address"
},
password: {
required: "Please enter your password",
minlength: ("Password cannot be less than {0} characters")
},
confirm_password: {
required: "Please enter the confirmation password",
minlength: "Confirm password cannot be less than 5 characters",
equalTo: "The password is inconsistent when two times are entered"
}
}
});
});
//In messages, if a control does not have a message, the default information will be called
<form method="get" action="">
<label for="firstname">Firstname</label>
<input name="firstname" />
<label for="email">E-Mail</label>
<input name="email" />
<label for="password">Password</label>
<input name="password" type="password" />
<label for="confirm_password">Confirm password</label>
<input name="confirm_password" type="password" />
<input class="submit" type="submit" value="Submit"/>
</form>
required:true must have a value
The value of the expression required:"#aa:checked" is true, and verification is required
required:function(){} returns true, and verification is required when the table is
The following two elements that are commonly used in the form that need to be filled in at the same time or not
Common methods and issues of attention
1. Replace the default SUBMIT with other methods
$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
();
}
});
});
You can set the default value of validate, the following is written:
$.({
submitHandler: function(form) { alert("submitted!");(); }
});
If you want to submit a form, you need to use() instead of $(form).submit()
, If this parameter is true, then the form will not be submitted and will only be checked, which is very convenient for debugging.
$().ready(function() {
$("#signupForm").validate({
debug:true
});
});
If there are multiple forms in a page, use
$.({
debug: true
})
: Ignore certain elements without verification
ignore: ".ignore"
: Callback Default: Put error message behind the verification element
Indicate the location of the error, the default is: (()); that is, put the error message behind the verification element.
errorPlacement: function(error, element) {
(());
}
//Example:
<tr>
<td class="label"><label for="firstname">First Name</label></td>
<td class="field"><input name="firstname" type="text" value="" maxlength="100" /></td>
<td class="status"></td>
</tr>
<tr>
<td style="padding-right: 5px;">
<input name="dateformat" type="radio" value="0" />
<label for="dateformat_eu">14/02/07</label>
</td>
<td style="padding-left: 5px;">
<input name="dateformat" type="radio" value="1" />
<label for="dateformat_am">02/14/07</label>
</td>
<td></td>
</tr>
<tr>
<td class="label"> </td>
<td class="field" colspan="2">
<div >
<input type="checkbox" name="terms" />
<label for="terms">I have read and accept the Terms of Use.</label>
</td>
</tr>
errorPlacement: function(error, element) {
if ( (":radio") )
( ().next().next() );
else if ( (":checkbox") )
( () );
else
( ().next() );
}
The function of the code is: in general, the error message is displayed in <td class="status"></td>, if it is radio, it is displayed in <td></td>, if it is checkbox, it is displayed behind the content
errorClass：String Default: "error"
Specify the css class name of the error prompt, and you can customize the style of the error prompt
errorElement：String Default: "label"
What label is used to mark the error? The default is label, you can change it to em
errorContainer：Selector
Show or hide verification information, which can automatically change the container attribute to display when error information appears, and hide it when there is no error, and it is of little use.
errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer：Selector
Put the error message in a container.
wrapper：String
What label should be used to wrap the errorELement above
Generally, these three attributes are used at the same time to realize the function of displaying all error messages in a container, and automatically hide them when there is no information.
errorContainer: "",
errorLabelContainer: $("#signupForm "),
wrapper: "li"
Set the style of error prompts, and add icon display
{ border: 1px solid red; }
{
background:url("./demo/images/") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
{
background:url("./demo/images/") no-repeat 0px 0px;
}
success：String,Callback
If the element to be verified passes the verification action, if it is followed by a string, it will be treated as a css class or a function
success: function(label) {
// set as text for IE
(" ").addClass("checked");
//("valid").text("Ok!")
}
Add "valid" to the validation element, style defined in CSS <style> {}</style>
success: "valid"
nsubmit： Boolean Default: true
Verify when submitting. Set only false and use other methods to verify
onfocusout：Boolean Default: true
Losing focus is verification (excluding checkboxes/radio buttons)
onkeyup：Boolean Default: true
Verify at keyup time.
onclick：Boolean Default: true
Verify when checkboxes and radio click
focusInvalid：Boolean Default: true
After submitting the form, the form that has not been verified (the first or the unverified form that has been verified before submitting) will gain focus.
focusCleanup：Boolean Default: false
If true, the error prompt is removed when the unverified element gains focus. Avoid using focusInvalid
// Reset the form
$().ready(function() {
var validator = $("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
();
}
});
$("#reset").click(function() {
();
});
});
remote：URL
Use ajax to verify, and the current validated value will be submitted to the remote address by default. If you need to submit other values, you can use the data option
remote: ""
remote: {
url: "", //Background Processor
type: "post", //Data sending method
dataType: "json", //Accept data format
data: { //The data to be passed
username: function() {
return $("#username").val();
}
}
}
Remote address can only output "true" or "false", no other output
addMethod：name, method, message
Custom verification method
// Two bytes of Chinese characters
("byteRangeLength", function(value, element, param) {
var length = ;
for(var i = 0; i < ; i++){
if((i) > 127){
length++;
}
}
return (element) || ( length >= param[0] && length <= param[1] );
}, $.("Please make sure the entered value is between {0}-{1} bytes (one Chinese character counts 2 bytes)"));
// Postal code verification
("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return (element) || ((value));
}, "Please fill in your postal code correctly");
Verification of radio, checkbox, select
radio requires that one must be selected
<input type="radio" value="m" name="gender" class="{required:true}" />
<input type="radio" value="f" name="gender"/>
Checkbox requires that it must be selected
<input type="checkbox" class="checkbox" name="agree" class="{required:true}" />
The minlength of the checkbox indicates the minimum number that must be selected, maxlength indicates the maximum number of selected, rangelength:[2,3] indicates the number interval selected
<input type="checkbox" class="checkbox" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" class="checkbox" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" value="mail" name="spam[]" />
The required of select means that the selected value cannot be empty
<select name="jungle" title="Please select something!" class="{required:true}">
<option value=""></option>
<option value="1">Buga</option>
<option value="2">Baga</option>
<option value="3">Oi</option>
</select>
The minlength of select indicates the minimum number of selected (multiple-selectable select), maxlength represents the maximum number of selected, rangelength:[2,3] represents the number of selected interval
<select name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
<option value="b">Banana</option>
<option value="a">Apple</option>
<option value="p">Peach</option>
<option value="t">Turtle</option>
</select>
The article layout is a bit messy, it is just my own record~~
First post the code of a large domestic company:
Copy the codeThe code is as follows:
<script type="text/javascript">
function lang(key) {
mylang = {
'ls_input_myb': 'Please enter your account',
'ls_myb_email': 'The roaming coin account is the email address',
'ls_login_password': 'Please enter your login password',
'ls_password_length': 'Password length is between {0}-{1} bits',
'ls_input_captcha': 'Please enter the verification code',
'ls_captcha_length': 'The length of the verification code is {0} bit',
'ls_account_email': 'Account name is email address',
'':''
};
return mylang[key];
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#loginForm").validate({
rules: {
uEmail: {
required: true,
email: true
},
uPassword: {
required: true,
rangelength: [6, 30]
}
},
messages: {
uEmail: {
required: lang('ls_input_myb'),
email: lang('ls_myb_email')
},
uPassword: {
required: lang('ls_login_password'),
rangelength: $.format(lang('ls_password_length'))
}
},
errorPlacement: function(error, element) {
var placement = $(("td").parent("tr").next("tr").find("td").get(1));
('');
( placement );
},
onkeyup: false
});
var accountTipsText = lang('ls_account_email');
$("#uEmail").focus(function() {
if (!$($(this).parent().parent().next().find('td').get(1)).text()) {
$($(this).parent().parent().next().find('td').get(1)).html('<span class="font_888_8">' + accountTipsText + '</span>');
}
$(this).css('color', '#000');
}).focus();
});
</script>
I started with this example. In fact, this example contains almost the essence. If you fully understand this code, it is basically a beginning.
I remember when I used to write code to judge when I was online simulation of futures web pages. I was so naive...
The following is a complete article introduction.
Default verification rules
(1) required:true Must-win field
(2) remote:"" Use ajax method to verify the input value
(3) email:true Email in the correct format must be entered
(4)url:true The correct formatted URL must be entered.
(5)date:true The correct format date must be entered.
(6)dateISO:true The date (ISO) of the correct format must be entered, for example: 2009-06-23, 1998/01/22 Only verify the format, not validity
(7) number:true A legal number (negative number, decimal) must be entered.
(8)digits:true Integer must be entered
(9) creditcard: You must enter a legal credit card number
(10) equalTo:"#field" input value must be the same as #field
(11)accept: Enter a string with a legal suffix name (the suffix of the upload file)
(12)maxlength:5 Enter a string with a maximum length of 5 (Chinese characters are counted as one character)
(13)minlength:10 Enter a string with a minimum length of 10 (Chinese characters are counted as one character)
(14)rangelength:[5,10] The input length must be between 5 and 10") (Chinese characters count as a character)
(15)range:[5,10] The input value must be between 5 and 10
(16)max:5 The input value cannot be greater than 5
(17)min:10 The input value cannot be less than 10
Default prompt
Copy the codeThe code is as follows:
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: $.("Please enter no more than {0} characters."),
minlength: $.("Please enter at least {0} characters."),
rangelength: $.("Please enter a value between {0} and {1} characters long."),
range: $.("Please enter a value between {0} and {1}."),
max: $.("Please enter a value less than or equal to {0}."),
min: $.("Please enter a value greater than or equal to {0}.")
},
If you need to modify it, you can add it to the js code:
Copy the codeThe code is as follows:
(, {
required: "Required fields",
remote: "Please fix this field",
email: "Please enter the correct format email",
url: "Please enter a legal URL",
date: "Please enter a legal date",
dateISO: "Please enter a legal date (ISO).",
number: "Please enter a legal number",
digits: "Only input integers",
creditcard: "Please enter a legal credit card number",
equalTo: "Please enter the same value again",
accept: "Please enter a string with a legal suffix name",
maxlength: ("Please enter a string with a length of up to {0}"),
minlength: ("Please enter a string with at least {0}"),
rangelength: ("Please enter a string with length between {0} and {1}"),
range: ("Please enter a value between {0} and {1}"),
max: ("Please enter a value with a maximum of {0}"),
min: ("Please enter a value with the minimum {0}")
});
Recommended practice: put this file into messages_cn.js and introduce it in the page
<script src="../js/messages_cn.js" type="text/javascript"></script>
How to use
1. Write the verification rules to the control
Copy the codeThe code is as follows:
<script src="../js/" type="text/javascript"></script>
<script src="../js/" type="text/javascript"></script>
<script src="./js/" type="text/javascript"></script>
$().ready(function() {
$("#signupForm").validate();
});
<form method="get" action="">
<label for="firstname">Firstname</label>
<input name="firstname" class="required" />
<label for="email">E-Mail</label>
<input name="email" class="required email" />
<label for="password">Password</label>
<input name="password" type="password" class="{required:true,minlength:5}" />
<label for="confirm_password">Confirm password</label>
<input name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
<input class="submit" type="submit" value="Submit"/>
</form>
Using class="{}", the package must be introduced:
You can use the following method to modify the prompt content:
class="{required:true,minlength:5,messages:{required:'Please enter content'}}"
When using the equalTo keyword, the following content must be quoted, as follows:
class="{required:true,minlength:5,equalTo:'#password'}"
Another way, use keywords: meta (use other plugins for metadata you want to wrap your verification rules in their own projects with this special option)
Tell the validation plugin to look inside a validate-property in metadata for validation rules.
For example:
meta: "validate"
<input name="password" type="password" class="{validate:{required:true,minlength:5}}" />
Another way:
$.("attr", "validate");
This way you can use validate="{required:true}" or class="required", but class="{required:true,minlength:5}" will not work
2. Write the verification rules into the code
Copy the codeThe code is as follows:
$().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: "Please enter your name",
email: {
required: "Please enter the email address",
email: "Please enter the correct email address"
},
password: {
required: "Please enter your password",
minlength: ("Password cannot be less than {0} characters")
},
confirm_password: {
required: "Please enter the confirmation password",
minlength: "Confirm password cannot be less than 5 characters",
equalTo: "The password is inconsistent when two times are entered"
}
}
});
});
//In messages, if a control does not have a message, the default information will be called
<form method="get" action="">
<label for="firstname">Firstname</label>
<input name="firstname" />
<label for="email">E-Mail</label>
<input name="email" />
<label for="password">Password</label>
<input name="password" type="password" />
<label for="confirm_password">Confirm password</label>
<input name="confirm_password" type="password" />
<input class="submit" type="submit" value="Submit"/>
</form>
required:true must have a value
The value of the expression required:"#aa:checked" is true, and verification is required
required:function(){} returns true, and verification is required when the table is
The following two elements that are commonly used in the form that need to be filled in at the same time or not
Common methods and issues of attention
1. Replace the default SUBMIT with other methods
Copy the codeThe code is as follows:
$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
();
}
});
});
You can set the default value of validate, the following is written:
$.({
submitHandler: function(form) { alert("submitted!");(); }
});
If you want to submit a form, you need to use() instead of $(form).submit()
, If this parameter is true, then the form will not be submitted and will only be checked, which is very convenient for debugging.
$().ready(function() {
$("#signupForm").validate({
debug:true
});
});
If there are multiple forms in a page, use
$.({
debug: true
})
: Ignore certain elements without verification
ignore: ".ignore"
: Callback Default: Put error message behind the verification element
Indicate the location of the error, the default is: (()); that is, put the error message behind the verification element.
Copy the codeThe code is as follows:
errorPlacement: function(error, element) {
(());
}
//Example:
<tr>
<td class="label"><label for="firstname">First Name</label></td>
<td class="field"><input name="firstname" type="text" value="" maxlength="100" /></td>
<td class="status"></td>
</tr>
<tr>
<td style="padding-right: 5px;">
<input name="dateformat" type="radio" value="0" />
<label for="dateformat_eu">14/02/07</label>
</td>
<td style="padding-left: 5px;">
<input name="dateformat" type="radio" value="1" />
<label for="dateformat_am">02/14/07</label>
</td>
<td></td>
</tr>
<tr>
<td class="label"> </td>
<td class="field" colspan="2">
<div >
<input type="checkbox" name="terms" />
<label for="terms">I have read and accept the Terms of Use.</label>
</td>
</tr>
errorPlacement: function(error, element) {
if ( (":radio") )
( ().next().next() );
else if ( (":checkbox") )
( () );
else
( ().next() );
}
The function of the code is: in general, the error message is displayed in <td class="status"></td>, if it is radio, it is displayed in <td></td>, if it is checkbox, it is displayed behind the content
errorClass：String Default: "error"
Specify the css class name of the error prompt, and you can customize the style of the error prompt
errorElement：String Default: "label"
What label is used to mark the error? The default is label, you can change it to em
errorContainer：Selector
Show or hide verification information, which can automatically change the container attribute to display when error information appears, and hide it when there is no error, and it is of little use.
errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer：Selector
Put the error message in a container.
wrapper：String
What label should be used to wrap the errorELement above
Generally, these three attributes are used at the same time to realize the function of displaying all error messages in a container, and automatically hide them when there is no information.
errorContainer: "",
errorLabelContainer: $("#signupForm "),
wrapper: "li"
Set the style of error prompts, and add icon display
{ border: 1px solid red; }
{
background:url("./demo/images/") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
{
background:url("./demo/images/") no-repeat 0px 0px;
}
success：String,Callback
If the element to be verified passes the verification action, if it is followed by a string, it will be treated as a css class or a function
success: function(label) {
// set as text for IE
(" ").addClass("checked");
//("valid").text("Ok!")
}
Add "valid" to the validation element, style defined in CSS <style> {}</style>
success: "valid"
nsubmit： Boolean Default: true
Verify when submitting. Set only false and use other methods to verify
onfocusout：Boolean Default: true
Losing focus is verification (excluding checkboxes/radio buttons)
onkeyup：Boolean Default: true
Verify at keyup time.
onclick：Boolean Default: true
Verify when checkboxes and radio click
focusInvalid：Boolean Default: true
After submitting the form, the form that has not been verified (the first or the unverified form that has been verified before submitting) will gain focus.
focusCleanup：Boolean Default: false
If true, the error prompt is removed when the unverified element gains focus. Avoid using focusInvalid
Copy the codeThe code is as follows:
// Reset the form
$().ready(function() {
var validator = $("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
();
}
});
$("#reset").click(function() {
();
});
});
remote：URL
Use ajax to verify, and the current validated value will be submitted to the remote address by default. If you need to submit other values, you can use the data option
Copy the codeThe code is as follows:
remote: ""
remote: {
url: "", //Background Processor
type: "post", //Data sending method
dataType: "json", //Accept data format
data: { //The data to be passed
username: function() {
return $("#username").val();
}
}
}
Remote address can only output "true" or "false", no other output
addMethod：name, method, message
Custom verification method
// Two bytes of Chinese characters
("byteRangeLength", function(value, element, param) {
var length = ;
for(var i = 0; i < ; i++){
if((i) > 127){
length++;
}
}
return (element) || ( length >= param[0] && length <= param[1] );
}, $.("Please make sure the entered value is between {0}-{1} bytes (one Chinese character counts 2 bytes)"));
// Postal code verification
("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return (element) || ((value));
}, "Please fill in your postal code correctly");
Verification of radio, checkbox, select
radio requires that one must be selected
<input type="radio" value="m" name="gender" class="{required:true}" />
<input type="radio" value="f" name="gender"/>
Checkbox requires that it must be selected
<input type="checkbox" class="checkbox" name="agree" class="{required:true}" />
The minlength of the checkbox indicates the minimum number that must be selected, maxlength indicates the maximum number of selected, rangelength:[2,3] indicates the number interval selected
Copy the codeThe code is as follows:
<input type="checkbox" class="checkbox" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" class="checkbox" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" value="mail" name="spam[]" />
The required of select means that the selected value cannot be empty
Copy the codeThe code is as follows:
<select name="jungle" title="Please select something!" class="{required:true}">
<option value=""></option>
<option value="1">Buga</option>
<option value="2">Baga</option>
<option value="3">Oi</option>
</select>
The minlength of select indicates the minimum number of selected (multiple-selectable select), maxlength represents the maximum number of selected, rangelength:[2,3] represents the number of selected interval
Copy the codeThe code is as follows:
<select name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
<option value="b">Banana</option>
<option value="a">Apple</option>
<option value="p">Peach</option>
<option value="t">Turtle</option>
</select>
The article layout is a bit messy, it is just my own record~~