JavaScript代码:
<script type="text/javascript">
//判断是否为空
function textIsNull(obj) {
if (obj.value.length > 0)
return true;
else
return false;
}
//判断姓名是否符合
function textName(obj){
var tiaojian =/^[a-z0-9]+$/;
if(tiaojian.test(obj.value))
return true;
else
return false;
}
//判断密码长度
function textLength(obj,min,max){
if(isNaN(min)){
min=0;
}
if(isNaN(max)){
max=obj.value.length;
}
if(obj.value.length >= min && obj.value.length <= max)
return true;
else
return false;
}
//判断密码输入是否一致
function pwdIsSame(obj1,obj2){
if(obj1.value == obj2.value)
return true;
else
return false;
}
function panduan1(){
if(textIsNull(document.getElementById("name")) == false){
document.getElementById("show1").style.display="block";
document.getElementById("show1").style.display="inline";
}else if(textIsNull(document.getElementById("name")) == true)
{
document.getElementById("show1").style.display="none";
}
if(textName(document.getElementById("name")) == false){
document.getElementById("show2").style.display="block";
document.getElementById("show2").style.display="inline";
}else if(textName(document.getElementById("name")) == true){
document.getElementById("show2").style.display="none";
}
}
function panduan2(){
if(textIsNull(document.getElementById("pwd")) == false){
document.getElementById("show3").style.display="block";
document.getElementById("show3").style.display="inline";
}else if(textIsNull(document.getElementById("pwd")) == true){
document.getElementById("show3").style.display="none";
}
if(textLength(document.getElementById("pwd"),6,24) == false){
document.getElementById("show4").style.display="block";
document.getElementById("show4").style.display="inline";
}else if(textLength(document.getElementById("pwd"),6,24) == true){
document.getElementById("show4").style.display="none";
}
}
function panduan3(){
if(pwdIsSame(document.getElementById("pwd"),document.getElementById("pwd2")) == false){
document.getElementById("show5").style.display="block";
document.getElementById("show5").style.display="inline";
}else if(pwdIsSame(document.getElementById("pwd"),document.getElementById("pwd2")) == true){
document.getElementById("show5").style.display="none";
}
}
function init(){
document.getElementById("name").οnblur=panduan1;
document.getElementById("pwd").οnblur=panduan2;
document.getElementById("pwd2").οnblur=panduan3;
}
</script>
HTML代码:<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证</title>
<style type="text/css">
input{ width:120px;}
</style>
</head>
<body οnlοad="init()">
姓 名:<input type="text" id="name" value="" />
<div id="show1" style="display:inline;color:#F00; display:none; font-size:13px">姓名不能为空</div>
<div id="show2" style="display:inline;color:#F00; display:none; font-size:13px">必须是a-z、0-9和下划线</div><br />
密 码:<input type="password" id="pwd" value="" />
<div id="show3" style="display:inline;color:#F00; display:none; font-size:13px">密码不能为空</div>
<div id="show4" style="display:inline; color:#F00; display:none; font-size:13px">密码不能小于6位</div><br />
确认密码:<input type="password" id="pwd2" value="" />
<div id="show5" style="display:inline; color:#F00; display:none; font-size:13px">密码输入不一致</div><br />
<input type="button" id="queren" value="确认" />
</body>
</html>