Created
October 25, 2010 16:50
-
-
Save fillano/645287 to your computer and use it in GitHub Desktop.
簡單的表單驗證測試，不過只能在Opera瀏覽器執行
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="zh-TW"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf8"> | |
| <style> | |
| div { | |
| background:#99CCFF; | |
| border:solid 1px #336699; | |
| margin:10px; | |
| padding:5px; | |
| border-radius:5px; | |
| display:inline-block; | |
| vertical-align:top; | |
| width:40%; | |
| } | |
| div.form1 { | |
| display:block; | |
| width:80%; | |
| text-align:center; | |
| } | |
| </style> | |
| <script> | |
| var f=function(s){return document.getElementsByName(s);}, | |
| id=function(s){return document.getElementById(s);}; | |
| function check(){ | |
| var acc=f('account')[0], | |
| mail=f('email')[0], | |
| pas1=f('password')[0], | |
| pas2=f('password1')[0], | |
| ret=true, | |
| msg=['out1','out2','out3','out4']; | |
| for(var i=0,j=msg.length;i<j;i++){ | |
| id(msg[i]).value = ''; | |
| } | |
| if(pas1.value!=pas2.value){ | |
| pas2.setCustomValidity('密碼不一致'); | |
| ret=false; | |
| }else{ | |
| pas2.setCustomValidity(''); | |
| } | |
| if(!pas2.checkValidity()){ | |
| ret = false; | |
| } | |
| if(!pas1.checkValidity()){ | |
| ret = false; | |
| } | |
| if(!mail.checkValidity()){ | |
| ret = false; | |
| } | |
| if(!acc.checkValidity()){ | |
| ret = false; | |
| } | |
| if(ret){ | |
| return confirm('表單即將送出'); | |
| } | |
| return ret; | |
| } | |
| function init(){ | |
| var acc=f('account')[0], | |
| mail=f('email')[0], | |
| pas1=f('password')[0], | |
| pas2=f('password1')[0]; | |
| function handler(target){ | |
| return function(e){ | |
| var str=''; | |
| if(e.currentTarget.validity.valueMissing) | |
| str+=' [必須輸入] '; | |
| if(e.currentTarget.validity.typeMismatch) | |
| str+=' [格式不符標準] '; | |
| if(e.currentTarget.validity.patternMismatch) | |
| str+=' [格式不符規則] '; | |
| if(e.currentTarget.validity.tooLong) | |
| str+=' [太長] '; | |
| if(e.currentTarget.validity.rangeUnderflow) | |
| str+=' [太小] '; | |
| if(e.currentTarget.validity.rangeOverflow) | |
| str+=' [太大] '; | |
| if(e.currentTarget.validity.stepMismatch) | |
| str+=' [與step不符合] '; | |
| if(e.currentTarget.validity.customError) | |
| str+=' ['+ e.currentTarget.validationMessage +'] '; | |
| target.value=str; | |
| }; | |
| } | |
| acc.addEventListener('invalid',handler(id('out1')),false); | |
| mail.addEventListener('invalid',handler(id('out2')),false); | |
| pas1.addEventListener('invalid',handler(id('out3')),false); | |
| pas2.addEventListener('invalid',handler(id('out4')),false); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <form onsubmit="return check();"> | |
| <div class="form1"> | |
| <div> | |
| <label>帳號 </label> | |
| <input type="text" maxlength="12" pattern="^[a-zA-Z0-9]{6,10}$" name="account" required> | |
| <output id="out1"></output> | |
| </div> | |
| <div> | |
| <label>電子郵件 </label> | |
| <input type="email" name="email" required> | |
| <output id="out2"></output> | |
| </div> | |
| <div> | |
| <label>密碼 </label> | |
| <input type="password" maxlength="10" pattern="^[a-zA-Z0-9]{6,10}$" name="password" required> | |
| <output id="out3"></output> | |
| </div> | |
| <div> | |
| <label>密碼確認 </label> | |
| <input type="password" maxlength="10" pattern="^[a-zA-Z0-9]{6,10}$" name="password1" required> | |
| <output id="out4"></output> | |
| </div> | |
| <div> | |
| <input type="submit"> | |
| <input type="reset"> | |
| </div> | |
| </div> | |
| </form> | |
| </body> | |
| </html> | |
| <script> | |
| init(); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment