fillano/html5 form validation

## 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>
	<!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>