等大部分瀏覽器支持html5，頁面不用修改，直接刪除jquery插件就可以繼續(xù)使用。
注意：1、本例使用的jquery插件是jquery.tools.min.js，最好使用包含jquery基礎(chǔ)包的完整版本。
2、本例中的驗證，在火狐，ie7、8、9，Safari中測試了，可以用。
3、表單提交使用Submit按鈕
花了好久調(diào)試的，希望對看到的人有用。如果有錯誤，歡迎指正。
<form id="from1">
<table width="500" border="0" cellpadding="4" cellspacing="4">
<tr>
<td colspan="2"><div align="center" >本例包含 A-E 的內(nèi)容</div></td>
</tr>
<tr>
<td width="120">name </td>
<td ><input type="text" name="name" placeholder="name" min="5" man="50" onFocus="$(this).select()"/></td>
</tr>
<tr>
<td >email </td>
<td ><input type="email" required="required" name="email" /></td>
</tr>
<tr>
<td>website </td>
<td><input type="url" required="required" name="url"/></td>
</tr>
<tr>
<td>age</td>
<td><input type="number" name="age" pattern="[0-9]" data-message="請輸入0-9的數(shù)字"/></td>
</tr>
<tr>
<td>time</td>
<td><input type="time" name="time" data-message="Please fill in the correct time" /></td>
</tr>
<tr>
<td>Password </td>
<td> <input type="password" name="password" required="required" /></td>
</tr>
<tr>
<td>Password check</td>
<td><input type="password" name="check" data-equals="password" /></td>
</tr>
<tr>
<td>Hobby</td>
<td><input name="Hobby" type="checkbox" class="checkbox" id="hoddy" value="01" group="mHobby">sleep</input><br/>
<input name="Hobby" type="checkbox" class="checkbox" id="hoddy" value="02" group="mHobby">Swimming</input><br/>
<input name="Hobby" type="checkbox" class="checkbox" id="hoddy" value="03" group="mHobby">Run</input>
</td>
</tr>
<tr>
<td>Sex</td>
<td><input name="sex" type="radio" class="radio" value="0" checked>Man
<input type="radio" name="sex" value="1" class="radio">Woman</td>
</tr>
<tr>
<td>Other</td>
<td><textarea cols="20" rows="5" required="required" data-message="Write something"></textarea></td>
</tr>
<tr>
<td>Country</td>
<td><select name="select" required="required">
<option selected value="0">請選擇</option>
<option value="111">中國</option>
<option value="222">英國</option>
<option value="333">美國</option>
</select></td>
</tr>
<tr>
<td>Area</td>
<td><select name="select2" size="5" multiple required="required">
<option value="111">北京</option>
<option value="222">上海</option>
<option value="333">廣州</option>
</select></td>
</tr>
<tr>
<td>I accept the terms</td>
<td><input type="checkbox" id="accept" required="required" class="checkbox" /></td>
</tr>
<tr>
<td></td>
<td><input type="Submit" class="btn" value="Submit" /></td>
</tr>
</table>
<br/>
</form>
A、常用html5增加的input類型包括：email、url、number、time.
B、常用html5增加的input屬性包括：required（必填）、pattern（驗證正則表達式）、data-message（錯誤提示）、min（最小長度）、max（最大長度）、data-equals（判斷兩個輸入框值是否一致，常用于密碼框的2次輸入）
C、使用jquery驗證：沒有特殊樣式需求，在表單后面調(diào)用下面的方法：
$("#from1").validator();
D、當(dāng)input類型為time時，在支持html5的瀏覽器中，輸入框自動識別輸入格式，在不支持html5的瀏覽器中，使用以下代碼：
$.tools.validator.fn("[type=time]", "Please supply a valid time", function(input, value) {
return /^\d\d:\d\d$/.test(value);
});$.tools.validator.fn()的三個參數(shù)分別是：input類型，錯誤提示，函數(shù)
E、當(dāng)data-equals屬性出現(xiàn)時，在支持html5的瀏覽器中，自動驗證兩個輸入框值是否相等，在不支持html5的瀏覽器中，使用以下代碼：
$.tools.validator.fn("[data-equals]", "Different value and $ 1", function(input) {
var name = input.attr("data-equals"),
field = this.getInputs().filter("[name=" + name + "]");
return input.val() == field.val() ? true : [name];
});$.tools.validator.fn()的參數(shù)中‘$1’代表 data-equals 的值
F、國家選項為菜單類型， 沒有直接可以用的驗證方法，使用以下代碼：
$.tools.validator.fn("[name=select]", "Please select a value", function(input, value) {
if( value == "0"){
return false;
}else{
return true;
}
});再舉個例子：驗證id為name的文本框。
$.tools.validator.fn("[id=name]", "該品牌已存在", function(input, value) {
if(isBrandExists()){
return false;
}else if(isBrandHasRel()){
return false;
}else{
return true;
}
});isBrandExists()和isBrandHasRel()方法是含有業(yè)務(wù)邏輯的驗證。
效果圖：
G、錯誤提示的位置可以不同，可以設(shè)置不同的提示框樣式。使用以下代碼：
$("#myform2").validator({
position: 'top left', //提示框出現(xiàn)的位置。一共有8個方位
offset: [-12, 0],//提示框的偏移量
message: '<div><em/></div>'//提示文字的容器，這里的<em/>是為了美觀設(shè)置的箭頭，一般使用<div></div>
})
用到的css樣式如下：
.error { padding: 4px 8px; border: 1px solid #ffff99; height: 16px; color:#336699; font-size: 12px; display: none; background-color: #ffff99; vertical-align:middle;
-moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius-topleft: 0; -moz-box-shadow: 0 0 6px #ddd; -webkit-border-top-left-radius: 0;
-webkit-box-shadow: 0 0 6px #ddd; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0;
}
.error em { border-width: 10px; border-style: solid; border-color:#ffff99 transparent transparent; width: 0px; height: 0px; bottom: -20px; display: block; position: absolute;}
效果圖：
H、出現(xiàn)錯誤時，給輸入框加上醒目的樣式。使用以下代碼：
$("#myform3").bind("onFail", function(e, errors) {
if (e.originalEvent.type == 'submit') {
$.each(errors, function() {
var input = this.input;
input.css({border: 'red 1px solid'}).focus(function() {//這里為輸入錯誤的樣式
input.css({borde: '#ccc 1px solid'});//這里為輸入正確后的樣式
});
});
}
});
效果圖，圖1為驗證成功，圖2為驗證失敗
圖1
html代碼：
I、模擬后臺驗證。使用以下代碼：
這是在前臺基本驗證通過以后再到服務(wù)器驗證數(shù)據(jù)。
$("#from4").validator().submit(function(e) {
var form = $(this);
// 如果客戶端驗證通過
if (!e.isDefaultPrevented()) {
$.getJSON("js/server-fail.js", function(json){
// 服務(wù)器端驗證通過，就跳轉(zhuǎn)
if ($("#name2").val()=="qwert") {
form.load("success.html");
// 服務(wù)器端驗證失敗，使用json中的信息驗證
} else {
form.data("validator").invalidate(json);
}
});
//禁止默認(rèn)提交
e.preventDefault();
}
});
