用HTML5验证表单的输入值.PDF

用 HTML5 驗證表單的輸入值 當我們在網頁設計了表單讓使用者輸入資料, 例如：註冊網站會員、留言 板...等, 您是否擔心使用者沒有依要求輸入正確的資料呢?像是在 email 欄位隨 意輸入「abcdefg」, 或是在電話欄位只打了「123」, 那麼這些錯誤的資料可能無 法正確傳送 email 給您, 或是讓您聯絡到對方, 對我們來說只是白白浪費時間 去處理這些資料罷了。 因此, 在使用者填寫了資料要送出之前, 我們應該做一些簡單的資料驗證, 以減少這些無用的資料。過去要做到表單的資料驗證, 都需要透過程式語言才可 以, 但現在利用 HTML5 的屬性, 再搭配有支援 HTML5 的網頁瀏覽器, 就可 以做到資料驗證。 Tip HTML5 的驗證功能在太舊的網頁瀏覽器上可能無法順利執行。 ＊用 required 屬性驗證必填欄位 我們可以在 input 元件內加上 required 屬性, 成為必填欄位。input 的類 型可以是文字欄位 (text)、單選鈕 (radio) 等。required 屬性的用法如下： input type=text requierd / input type=radio requierd / 指定了必填欄位後, 我們也可以加上一些樣式, 提醒使者該欄為必填欄位。 而在使用者送出表單時, 則會檢查該欄位是否有填入資料, 若沒有則會出現提示, 告知使用者必須填寫欄位內容： Tip 下面這個範例除了用到 HTML5 的驗證屬性外, 還會使用到 CSS3 來設定表單樣式。 „ex09-08.html html body form div label for=namespan class=require*/span姓名/label input type=text name=name id=name required / 必填的欄位就加上這個屬性 /div br/ div label for=emailspan class=require*/spanEmail/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 label for=commentspan class=require*/span意見/label textarea cols=40 rows=8 name=comment id=comment required/textarea 必填的欄位就加上這個屬性 /div br/ div class=buttons input type=submit value=送出 / /div /form /body /html 執行結果 1 忽略必填 欄位不填 2 按此鈕將表 單資料送出 3 出現提示訊息, 請 使用者填寫資料 右圖出現的提示訊息 Tip 屬於網頁瀏覽器的功 能, 因此不同的瀏覽 器, 訊息的樣式也會有