教大家怎麼使用HTML5來編寫使用者註冊驗證
工具/原料
瀏覽器：IE9或以上、谷歌、火狐
Dreamweaver
方法/步驟
第一步:使用者註冊介面製作在製作使用者介面的時候我們得考慮需要哪些元素,一般情況下我們可能只要3種元素:賬號(user)、密碼(password)還有用來取回密碼的郵箱(email)或其它認證。
第二步:新增欄位提示使用html5提供的placeholder屬性來為表單新增提示資訊.如:
給使用者名稱新增提示資訊:
給密碼新增提示資訊:
第三步:為必填欄位新增required屬性如:給使用者名稱新增必填:
新增required屬性的欄位如果在提交過程中沒有填寫 就會彈出提示.如圖
第四步:給欄位新增驗證規制
可以用html5的pattern屬性來給要驗證的欄位新增正則表示式來驗欄位
1:使用者名稱驗證規則 : 使用者名稱長度為3~12並且由字母組成
pattern="[A-z]{3,12}"
2:密碼驗證規則 : 密碼必須是陣列與字母組合
pattern="[A-Za-z].*[0-9] [0-9].*[A-Za-z]"
注意事項
使用的瀏覽器必須支援HMTL5