我在工作中时常使用form验证，在目前的公司做的表单验证用的angular的form组件，对于一个有追求的前端，或者应用在移动端写个form验证，引入angular或者jquery组件等验证，难免显得臃肿，最好是原生js吧，轻量。幸运 的等到这一课，加上之前所学，慢慢融合根据需求，应用到工作项目中。。。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>
<style>
input{ border:1px solid #ccc;}
.ok{ border-color:green;}
.error{ border-color:red;} </style>
<script src="checkForm.js"></script>
<script> window.onload = function(){
checkForm("form1");
};
</script>
</head> <body> <form id="form1" action="http://www.zhinengshe.com/">
用户名：<input type="text" name="username" value=""/><br /><br />
电话号码：<input type="text" name="tel" value="010-84025890"/><br /><br />
邮箱：<input type="text" name="email" value="chen00jian@sina.com"/><br /><br />
年龄：<input type="text" name="age" value=""/><br /><br /> <input type="submit"/>
</form> </body>
</html>
//版权 北京智能社©, 保留所有权利
var json = {
username:/^[a-z][a-z0-9_\-$]{,}$/i,
tel:/^([-]\d{,}-)?[-]\d{,}$/,
email:/^\w+@[a-z0-\-]+(\.[a-z]{,}){,}$/i,
age:/^([-]|[-]\d|)$/
};
function checkForm(id){
var oForm = document.getElementById(id);
var aInput = oForm.children;
for(var i = ; i < aInput.length; i++){
var re = json[aInput[i].name];
if(re){
(function(re){
aInput[i].onblur = function(){
checkText(re,this);
};
})(re);
}
}
function checkText(re,oText){
if(re.test(oText.value)){
oText.className = "ok";
return true;
} else {
oText.className = "error";
return false;
}
}
oForm.onsubmit = function(){
var bOk = true;
for(var i = ; i < aInput.length; i++){
var re = json[aInput[i].name];
if(re){
if(checkText(re,aInput[i]) == false){
bOk = false;
}
}
}
if(bOk == false){
return false;
}
};
}