HTML5表單驗證
1.HTML5表單驗證已經出來很長時間了,除了IE之外的瀏覽器基本都滿足要求。
<input> 標簽:text, search, url, telephone, email 以及 password。
required 屬性
required 屬性規定必須在提交之前填寫輸入域(不能為空)。
email: <input type="email" name="user_email">
在提交表單時,會自動驗證 email 域的值。
Homepage: <input type="url" name="user_url" />
在提交表單時,會自動驗證 url 域的值。
Points: <input type="number" name="points" min="1" max="10" />
number 類型用於應該包含數值的輸入域。
min 最小值 max最大值 step數字間隔 value 默認值
range 類型用於應該包含一定范圍內數字值的輸入域。
range 類型顯示為滑動條。您還能夠設定對所接受的數字的限定:
<input type="range" name="points" min="1" max="10" />
Input 類型 - Date Pickers(日期選擇器)
date - 選取日、月、年
month - 選取月、年
week - 選取周和年
time - 選取時間(小時和分鍾)
datetime - 選取時間、日、月、年(UTC 時間)
datetime-local - 選取時間、日、月、年(本地時間)
下面的例子允許您從日歷中選取一個日期:
實例
Date: <input type="date" name="user_date" />
HTML5 的新的表單屬性
autocomplete 屬性
<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
表單的自動完成功能是打開的,而 e-mail 域是關閉的。
autofocus 屬性規定在頁面加載時,域自動地獲得焦點。
User name: <input type="text" name="user_name" autofocus="autofocus" />
表單重寫屬性
表單重寫屬性(form override attributes)允許您重寫 form 元素的某些屬性設定。
formaction - 重寫表單的 action 屬性
<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>
這些屬性對於創建不同的提交按鈕很有幫助。
height 和 width 屬性
height 和 width 屬性規定用於 image 類型的 input 標簽的圖像高度和寬度。
注釋:height 和 width 屬性只適用於 image 類型的 <input> 標簽。
<input type="image" src="img_submit.gif" width="99" height="99" />
novalidate 屬性
novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。
驗證手機
<input type="text" name="mobile" autocomplete="off" pattern="^1[345678][0-9]{9}$" required />