吃驚！強大的HTML5居然能使表單驗證變得如此如此簡單！！！
阿新 • • 發佈：2019-01-01
（HTML5大神可以就此飄過，以前通過JS寫的那麼多的程式碼，現在通過HTML5居然可以怎麼簡單） ，廢話就少說了，直接上程式碼：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <header> <h3>使用者註冊</h3> </header> <nav> <span style="color: #666; font-size: 14px">已有賬號?</span><a href="#">去登入?</a><p></p><p></p> </nav> <section> <fieldset> <legend>請正確填寫相關資訊</legend> <form action="#" method="post" autocomplete="on"> <p><span style="letter-spacing: 1.3em">真實姓</span>名：<label><input type="text" required name="name" pattern="[\u4e00-\u9fa5]{2,}" oninvalid="validatelt(this,'真實姓名必須是中文，且長度不小於2')"/></label></p> <!-- require屬性，規定必須在提交之前填寫輸入域（不能為空）--> <!-- pattern屬性，描述了一個正則表示式用於驗證 <input> 元素的值--> <!-- required屬性，要求該輸入域不能為空 --> <p><span style="letter-spacing:6em">暱</span>稱：<label><input type="text" placeholder="該暱稱用於登入" required name="nichen"/></label></p> <!-- placehokder屬性，用於對該輸入框的提示內容--> <p><span style="letter-spacing: 1.3em">登入密</span>碼：<label><input type="password" pattern="[A-Za-z0-9]{6,30}" name="password" oninvalid="validatelt(this,'密碼長度至少為六位，且不能有中文')" /></label></p> <p><span style="letter-spacing: 6em">性</span>別：<label> <input type="radio" name="sex" value="man" />男：</label> <input type="radio" name="sex" value="women"/>女：</label> </p> <p><span style="letter-spacing: 1.3em">出生日</span>期：<label><input type="date" name="birthday" max="2016/7/10" required/></label></p> <p><span style="letter-spacing: 1.3em">電子郵</span>箱：<label><input name="email" type="email" required/></label></p> <p><span style="letter-spacing: 1.3em">聯絡電</span>話：<label><input name="phone" type="text" required pattern="1[34578]\d{9}$" oninvalid="validatelt(this,'電話號只能是11位的整數')" /></label></p> <p><span>選擇你喜歡的顏色：</span><label><input name="color" type="color" required/></label></p> <input type="submit"/> </form> </fieldset> </section> <footer> <hr/> 底部欄 </footer> </body> <script> //對懸浮窗的設定 function validatelt(inputelement,err){ if(inputelement.validity.patternMismatch){ inputelement.setCustomValidity(err); //錯誤後就清空，不過執行順序有點問題就不要了 // if(confirm("輸入有誤,是否清空此項？")){ // inputelement.value=""; // } }else{ inputelement.setCustomValidity(""); return true; } } </script> </html>
在回頭看以前寫的JS程式碼是否瞬間覺得HTML5的強大了啊？？？