驗證網頁表單輸入值
1. 用required屬性驗證必填欄位
我們可以在input元件內加上required屬性，成為必填的欄位。input的類型可以是文字欄位(text)、單選鈕(radio)...等。用法如下：
<input type="text" required /> <input type="radio" required />
指定了必填欄位後，我們可以加上一些樣式，提醒使用者該欄是必填的。而在使用者送出表單之時，則會檢查是否有填入正確格式的資料，若有錯誤則需出現提示，讓使用者進行更改。
<html>
<body>
<form>
<div>
<label for="name"><span class="required">*</span>姓名</label>
<input type="text" name="name" id="name" required />
</div>
<br>
<div>
<label for="email"><span class="required">*</span>Email</label>
<input type="email" name="email" id="email" required />
</div>
<br>
<div>
<label for="phone">電話</label>
<input type="text" name="phone" id="phone"/>
</div>
<br>
<div class="buttons">
<input type="submit" value="傳送" />
</div>
</form>
</body>
</html>
網頁呈現如下，你可以操作看看：
2. 用maxlength屬性驗證輸入長度
其次，我們可以用最多字母限制 maxlength 屬性做資料的驗證。比如台灣的電話有10碼，所以我們可以用 maxlength 來限制最多只能輸入10個文字。
<form>
<div>
<label for="phone">電話</label>
<input type="text" name="phone" id="phone" maxlength="10"/>
</div>
<br>
<div>
<label for="comment"><span
class="required">*</span>意見</label><br>
<textarea cols="40" rows="8" name="comment" id="comment" required></textarea>
</div>
<br>
<div class="buttons">
<input type="submit" value="送出" />
</div>
</form>
網頁呈現如下，你可以操作看看：
maxlength只能限制輸入的字數，無法限制輸入的是數字或英文字母。因此，maxlength的驗證只能說是提醒而已，並無法阻擋使用者刻意輸入錯誤的資料。 若要進行更準確的驗證使用者輸入的內容，接下來要談的pattern的屬性將會更有效。
3. 以pattern屬性驗證資料的正確性
HTML5驗證屬性最強大的是pattern，不論是資料的正確性檢查，或是錯誤資料的阻擋，都可以勝任。會如此強大，原因為pattern依靠的是『正則表達式』（Regular Expression）來完成。
『正則表達式』的內容相當多，並且可以做到相當複雜的文字對比。此文僅針對幾個例子介紹，若有興趣進一步了解的朋友，請問谷歌大神。
使用pattern屬性的語法如下：<input type="text" pattern="驗證文字的正則表達式" />
電子郵件驗證
<input type="text" pattern="[a-zA-Z0-9]+@[a-zA-Z0-9._]+"/>
純數字欄位驗證
1. 僅驗證第一位是否為數字，第二位以後不驗證<input type="text" pattern="[0-9]" />2. 驗證前三位是否為數字，第四位以後不驗證
<input type="text" pattern="[0-9]" {3}/>
3. 驗證所有文字是否為數字
<input type="text" pattern="[0-9]" */>
純英文欄位驗證
1. 僅驗證第一位是否為英文字母，第二位以後不驗證<input type="text" pattern="[A-Za-z]" />2. 驗證前三位是否為英文字母，第四位以後不驗證
<input type="text" pattern="[A-Za-z]" {3}/>
3. 驗證所有文字是否為英文字母
<input type="text" pattern="[A-Za-z]" */>
英文與數字組成的欄位驗證
1. 僅驗證第一位是否為英文字母或數字，第二位以後不驗證<input type="text" pattern="[A-Za-z0-9]" />2. 驗證前三位是否為英文字母或數字，第四位以後不驗證
<input type="text" pattern="[A-Za-z0-9]" {3}/>
3. 驗證所有文字是否為英文字母或數字
<input type="text" pattern="[A-Za-z0-9]" */>
使用pattern驗證欄位時，會在送出表單時將所有設有pattern屬性的欄位做一次性驗證。
驗證網頁表單輸入值
1. 用required屬性驗證必填欄位
我們可以在input元件內加上required屬性，成為必填的欄位。input的類型可以是文字欄位(text)、單選鈕(radio)...等。用法如下：
<input type="text" required /> <input type="radio" required />
指定了必填欄位後，我們可以加上一些樣式，提醒使用者該欄是必填的。而在使用者送出表單之時，則會檢查是否有填入正確格式的資料，若有錯誤則需出現提示，讓使用者進行更改。
<html>
<body>
<form>
<div>
<label for="name"><span class="required">*</span>姓名</label>
<input type="text" name="name" id="name" required />
</div>
<br>
<div>
<label for="email"><span class="required">*</span>Email</label>
<input type="email" name="email" id="email" required />
</div>
<br>
<div>
<label for="phone">電話</label>
<input type="text" name="phone" id="phone"/>
</div>
<br>
<div class="buttons">
<input type="submit" value="傳送" />
</div>
</form>
</body>
</html>
網頁呈現如下，你可以操作看看：
2. 用maxlength屬性驗證輸入長度
其次，我們可以用最多字母限制 maxlength 屬性做資料的驗證。比如台灣的電話有10碼，所以我們可以用 maxlength 來限制最多只能輸入10個文字。
<form>
<div>
<label for="phone">電話</label>
<input type="text" name="phone" id="phone" maxlength="10"/>
</div>
<br>
<div>
<label for="comment"><span
class="required">*</span>意見</label><br>
<textarea cols="40" rows="8" name="comment" id="comment" required></textarea>
</div>
<br>
<div class="buttons">
<input type="submit" value="送出" />
</div>
</form>
網頁呈現如下，你可以操作看看：
maxlength只能限制輸入的字數，無法限制輸入的是數字或英文字母。因此，maxlength的驗證只能說是提醒而已，並無法阻擋使用者刻意輸入錯誤的資料。 若要進行更準確的驗證使用者輸入的內容，接下來要談的pattern的屬性將會更有效。
3. 以pattern屬性驗證資料的正確性
HTML5驗證屬性最強大的是pattern，不論是資料的正確性檢查，或是錯誤資料的阻擋，都可以勝任。會如此強大，原因為pattern依靠的是『正則表達式』（Regular Expression）來完成。
『正則表達式』的內容相當多，並且可以做到相當複雜的文字對比。此文僅針對幾個例子介紹，若有興趣進一步了解的朋友，請問谷歌大神。
使用pattern屬性的語法如下：<input type="text" pattern="驗證文字的正則表達式" />
電子郵件驗證
<input type="text" pattern="[a-zA-Z0-9]+@[a-zA-Z0-9._]+"/>
純數字欄位驗證
1. 僅驗證第一位是否為數字，第二位以後不驗證<input type="text" pattern="[0-9]" />2. 驗證前三位是否為數字，第四位以後不驗證
<input type="text" pattern="[0-9]" {3}/>
3. 驗證所有文字是否為數字
<input type="text" pattern="[0-9]" */>
純英文欄位驗證
1. 僅驗證第一位是否為英文字母，第二位以後不驗證<input type="text" pattern="[A-Za-z]" />2. 驗證前三位是否為英文字母，第四位以後不驗證
<input type="text" pattern="[A-Za-z]" {3}/>
3. 驗證所有文字是否為英文字母
<input type="text" pattern="[A-Za-z]" */>
英文與數字組成的欄位驗證
1. 僅驗證第一位是否為英文字母或數字，第二位以後不驗證<input type="text" pattern="[A-Za-z0-9]" />2. 驗證前三位是否為英文字母或數字，第四位以後不驗證
<input type="text" pattern="[A-Za-z0-9]" {3}/>
3. 驗證所有文字是否為英文字母或數字
<input type="text" pattern="[A-Za-z0-9]" */>
使用pattern驗證欄位時，會在送出表單時將所有設有pattern屬性的欄位做一次性驗證。
