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()使用事項<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（驗證正則表達式）、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ù)邏輯的驗證。