吃驚!強大的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的強大了啊???