我在工作中时常使用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="[email protected]"/><br /><br />
年龄：<input type="text" name="age" value=""/><br /><br />
<input type="submit"/>
</form>
</body>
</html>
//版权 北京智能社©, 保留所有权利
var json = {
username:/^[a-z][a-z0-9_\-$]{5,31}$/i,
tel:/^(0[1-9]\d{1,2}-)?[1-9]\d{6,7}$/,
email:/^\[email protected][a-z0-9\-]+(\.[a-z]{2,6}){1,2}$/i,
age:/^(1[6-9]|[2-9]\d|100)$/
};
function checkForm(id){
var oForm = document.getElementById(id);
var aInput = oForm.children;
for(var i = 0; 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 = 0; 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;
}
};
}
时间： 2024-08-14 10:19:17