html5新增了很多東西，比如表單元素的類型，驗(yàn)證等等，但是現(xiàn)在諸多瀏覽器還不兼容html5的新特性，故此，使用jquery加以驗(yàn)證。等大部分瀏覽器支持html5，頁面不用修改，直接刪除jquery插件就可以繼續(xù)使用。
注意：
1、本例使用的jquery插件是jquery.tools.min.js，最好使用包含jquery基礎(chǔ)包的完整版本。
2、本例中的驗(yàn)證，在火狐，ie7、8、9，Safari中測試了，可以用。
3、表單提交使用Submit按鈕
Html代碼：
<formid="from1">
<tablewidth="500"border="0"cellpadding="4"cellspacing="4">
<tr>
<tdcolspan="2"><divalign="center">本例包含 A-E 的內(nèi)容</div></td>
</tr>
<tr>
<tdwidth="120">name</td>
<td><inputtype="text"name="name"placeholder="name"min="5"man="50"onFocus="$(this).select()"/></td>
</tr>
<tr>
<td>email</td>
<td><inputtype="email"required="required"name="email"/></td>
</tr>
<tr>
<td>website</td>
<td><inputtype="url"required="required"name="url"/></td>
</tr>
<tr>
<td>age</td>
<td><inputtype="number"name="age"pattern="[0-9]"data-message="請輸入0-9的數(shù)字"/></td>
</tr>
jQuery中html()使用事項(xiàng)
<tr>
<td>time</td>
<td><inputtype="time"name="time"data-message="Please fill in the correct time"/></td>
</tr>
<tr>
<td>Password</td>
<td><inputtype="password"name="password"required="required"/></td>
</tr>
<tr>
<td>Password check</td>
<td><inputtype="password"name="check"data-equals="password"/></td>
</tr>
<tr>
<td>Hobby</td>
<td><inputname="Hobby"type="checkbox"class="checkbox"id="hoddy"value="01"group="mHobby">sleep</input><br/>
<inputname="Hobby"type="checkbox"class="checkbox"id="hoddy"value="02"group="mHobby">Swimming</input><br/>
<inputname="Hobby"type="checkbox"class="checkbox"id="hoddy"value="03"group="mHobby">Run</input>
</td>
</tr>
<tr>
<td>Sex</td>
<td><inputname="sex"type="radio"class="radio"value="0"checked>Man
<inputtype="radio"name="sex"value="1"class="radio">Woman</td>
</tr>
<tr>
<td>Other</td>
<td><textareacols="20"rows="5"required="required"data-message="Write something"></textarea></td>
</tr>
<tr>
<td>Country</td>
<td><selectname="select"required="required">
<optionselected value="0">請選擇</option>
<optionvalue="111">中國</option>
<optionvalue="222">英國</option>
<optionvalue="333">美國</option>
</select></td>
sweage和wastewater有什么區(qū)別</tr>
<tr>
<td>Area</td>
<td><selectname="select2"size="5"multiple required="required">
<optionvalue="111">北京</option>
<optionvalue="222">上海</option>
<optionvalue="333">廣州</option>
</select></td>
</tr>
<tr>
<td>I accept the terms</td>
<td><inputtype="checkbox"id="accept"required="required"class="checkbox"/></td>
</tr>
<tr>
<td></td>
<td><inputtype="Submit"class="btn"value="Submit"/></td>
</tr>
</table>
<br/>
</form>
A、常用html5增加的input類型包括：email、url、number、time.B、常用html5增加的input屬性包括：required（必填）、pattern（驗(yàn)證正則表達(dá)式）、data-message（錯(cuò)誤提示）、min（最小長度）、max（最大長度）、data-equals（判斷兩個(gè)輸入框值是否一致，常用于密碼框的2次輸入）C、使用jquery驗(yàn)證：沒有特殊樣式需求，在表單后面調(diào)用下面的方法：$("#from1").validator();D、當(dāng)input類型為time時(shí)，在支持html5的瀏覽器中，輸入框自動(dòng)識(shí)別輸入格式，在不支持html5的瀏覽器中，使用以下代碼：$.tools.validator.fn("[type=time]", "Please supply a valid time", function(input, value) {
return /^\d\d:\d\d$/.test(value);
});$.tools.validator.fn()的三個(gè)參數(shù)分別是：input類型，錯(cuò)誤提示，函數(shù)E、當(dāng)data-equals屬性出現(xiàn)時(shí)，在支持html5的瀏覽器中，自動(dòng)驗(yàn)證兩個(gè)輸入框值是否相等，在不支持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、國家選項(xiàng)為菜單類型， 沒有直接可以用的驗(yàn)證方法，使用以下代碼：$.tools.validator.fn("[name=select]", "Please select a value", function(input, value) {
if( value == "0"){
return false;
}else{
return true;
}
});再舉個(gè)例子：驗(yàn)證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ù)邏輯的驗(yàn)證。