Skip to content

Instantly share code, notes, and snippets.

@fillano

fillano/html5 form validation

Created October 25, 2010 16:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fillano/645287 to your computer and use it in GitHub Desktop.
Save fillano/645287 to your computer and use it in GitHub Desktop.
Download ZIP
簡單的表單驗證測試，不過只能在Opera瀏覽器執行
Raw
html5 form validation
<!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