validation is an excellent form validation plugin, validation has 17 validation rules:
1 required:true field that must be entered
2 remote:"check.php" call check.php using ajax method to validate the input value
3 email:true must enter a properly formatted email
4 url:true must enter a properly formatted url
5 date: true must enter the date in the correct format, internally call the Date.parse() method for verification
6 dateISO:true must enter the date in the correct format (ISO), such as: 2009-06-23, 1998/01/22
7 number:true Must enter a valid number (negative number, decimal)
8 digits:true Must enter an integer
9 creditcard: Must enter a valid credit card number
10 equalTo:"#field" Input value must be the same as #field
11 accept: Enter a character with a valid suffix String (the suffix of the uploaded file)
12 maxlength:5 Input a string with a maximum length of 5 (Chinese characters count as one character)
13 minlength:10 Input a string with a minimum length of 10 (Chinese characters count as one character)
14 rangelength:[5,10] Input length must be between 5 A string between 10 and 10 (Chinese characters count as one 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
Its approximate usage is as follows:
<form id="demoForm">
<p>
<label for="username">用户名：</label>
<input type="text" id="username" name="username"/>
</p>
<p>
<label for="password">密码：</label>
<input type="password" id="password" name="password"/>
</p>
<p>
<label for="confirm-password">确认密码</label>
<input type="password" id="confirm-password" name="confirm-password"/>
</p>
<p>
<label for="email">电子邮件：</label>
<input id="email" name="email"/>
</p>
<p>
<label for="url">网址：</label>
<input id="url" name="url"/>
</p>
<p>
<label for="date">生日：</label>
<input id="date" name="date"/>
</p>
<p>
<label for="num">随机数(0-9)：</label>
<input id="num" name="num"/>
</p>
<p>
<label for="card">信用卡号：</label>
<input id="card" name="card"/>
</p>
<p>
<input type="submit" value="登录"/>
</p>
</form>
<script>
$('#demoForm').validate({
rules:{
username:{
required: true,
maxlength: 10
},
password:{
required: true,
range:[5,10]
},
'confirm-password':{
equalTo: "#password"
},
email:{
email:true
},
url:{
url:true
},
date:{
dateISO:true
},
num:{
min:0,
max:9
},
card:{
creditcard:true
}
}
})
</script>
In the past, when we refreshed the page content in the web page, we needed to fetch the new page from the server again. The emergence of Ajax has ushered in a new era of updating pages without refreshing. The basic methods are as follows:
1.url:
A parameter of type String is required, (default is the address of the current page) the address to which the request is sent.
2.type:
The parameter is required to be of type String. The request method (post or get) defaults to get. Note that other http request methods such as put and delete can also be used, but are only supported by some browsers.
3.data:
Requires a parameter of type Object or String, the data sent to the server. If it is not a string, it will be automatically converted to string format. The get request will be appended to the url. To prevent this automatic conversion, look at the processData option. The object must be in key/value format, e.g. {foo1:"bar1",foo2:"bar2"} is converted to &foo1=bar1&foo2=bar2. If it is an array, JQuery will automatically assign different values to the same name. For example {foo:["bar1","bar2"]} translates to &foo=bar1&foo=bar2.
4.success: The parameter is required to be a Function type, and the callback function to be called after the request is successful, with two parameters.
(1) The data returned by the server and processed according to the dataType parameter.
(2) A string describing the state.
function(data, textStatus){
//data may be xmlDoc, jsonObj, html, text, etc.
this;
}
5.error:
requires a parameter of type Function, the function to be called when the request fails. This function has 3 parameters, namely XMLHttpRequest object, error message, captured error object (optional). The ajax event function is as follows:
function(XMLHttpRequest, textStatus, errorThrown){
//Usually only one of textStatus and errorThrown contains information
this; //The options parameter passed when calling this ajax request
}
6.contentType:
requires String type parameter, when sending information to the server, the content encoding type defaults to "application/x-www-form-urlencoded". This default value is suitable for most applications.
7.jsonp:
requires a parameter of type String, rewrite the name of the callback function in a jsonp request. This value is used in place of the "callback" part of the URL parameter in a GET or POST request such as "callback=?", e.g. {jsonp:'onJsonPLoad'} will cause "onJsonPLoad=?" to be passed to the server.
Ajax usage example:
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
data: {username:$("#username").val(), content:$("#content").val()},
dataType: "json",
success: function(data){
$('#resText').empty(); //清空resText里面的所有内容
var html = '';
$.each(data, function(commentIndex, comment){
html += '<div class="comment"><h6>' + comment['username']
+ ':</h6><p class="para"' + comment['content']
+ '</p></div>';
});
$('#resText').html(html);
}
});
});
});