<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="liuyi -liuyi.com" />
<meta name="copyright" content="liuyi - liuyi.com" />
<title>liuyi - www.liuyi.com</title>
<style>
input{border:1px solid #ccc;}
input.ok{border:1px solid green;}
input.error{border:1px solid red;}
</style>
<script>
//方便维护
var json = {
username:/^[a-z_]w{5,31}$/i,
pass:/^.{6,32}$/i,
email:/^w+@[a-z0-9-]+(.[a-z]{2,8}){1,2}$/i,
tel:/^(0d{2,3}-)?[1-9]d{6,7}$/,
age:/^(1[89]|[2-9]d|100)$/
};
window.onload = function(){
var oFrom = document.getElementById("from1");
var aInput = oFrom.getElementsByTagName("input");
//失焦校验
for(var i = 0; i < aInput.length; i++){
var re = json[aInput[i].name];
if(re){
(function(re){
aInput[i].onblur = function(){
//alert(re)
checkText(re,this);
};
})(re);
}
}
function checkText(re,oText){
if(re.test(oText.value)){
oText.className = "ok";
return true;
} else {
oText.className = "error";
return false;
}
}
oFrom.onsubmit = function(){
var bOk = true;
for(var i = 0; i < aInput.length; i++){
var re = json[aInput[i].name];
if(re){
//做校验
/*if(re.test(aInput[i].value)){
aInput[i].className = "ok";
} else {
aInput[i].className = "error";
bOk = false;
//return false;
}*/
if(checkText(re,aInput[i]) == false){
bOk = false;
}
}
}
return bOk;
};
};
</script>
</head>
<body>
<form id="from1" action="http://www.liuyi.com/">
用户名：<input type="text" name="username" value="znstest"/><br /><br />
密 码：<input type="text" name="pass" value=""/><br /><br />
邮 箱：<input type="text" name="email" value="hxdale@163.com"/><br /><br />
座 机：<input type="text" name="tel" value="0214-31661688"/><br /><br />
年 龄：<input type="text" name="age" value=""/><br /><br />
<input type="submit" /><br /><br />
</form>
</body>
</html>