HTML5表單驗證


  

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  />


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM