驗證網頁表單輸入值

Written by Wanding on 20 August 2020

網頁表單提供互動式功能，讓使用者輸入資料，例如：留言版、會員註冊、登入密碼...等。使用者不一定總是輸入正確的格式，比如電話資料輸入一堆文字或email格式不符，這些錯誤資料將造成無法傳送或留言。因此，在使用者填寫資料要送出之前，我們應該做一些簡單的資料驗證，以減少這些無用的資料。我們可以利用HTML5的屬性，搭配有支援HTML5的網頁瀏覽器，就可以作到資料驗證。

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屬性的欄位做一次性驗證。

回目錄頁

驗證網頁表單輸入值