1.注册页面
<html>
<head>
<title>注册页面</title>
<style>
.stats1{
color:#aaa;
}
.stats2{
color:#000;
}
.stats3{
color:red;
}
.stats4{
color:green;
}
</style>
<script src="./regedit.js"></script>
</head>
<body>
<form action="24.html" method="post" onsubmit="return regs('click')">
username:<input type="text" name="username"/>
<span class="stats1">请输入用户名</span><br/>
password:<input type="password" name="password"/>
<span class="stats1">请输入用户密码</span><br/>
repass:<input type="password" name="repass"/>
<span class="stats1">请输入用户确认密码</span><br/>
other:<input type="text" name="other"/>
<span class="stats1">请输入其他</span><br/>
<input type="submit" name="sub" value="submit"/>
</form>
</body>
</html>
2.验证js
/**
* 取得html标签对象
* 获得下一个span，可以通过这个对象给状态
*/
function getTag(obj){
while(true){
if(obj.nextSibling.nodeName !='SPAN'){
obj = obj.nextSibling;
}else{
return obj.nextSibling;
}
}
}
/**
* 通用检查方法
* 第一个参数：obj是用来检查的对象
* 第二个参数：info是用来检查的提示信息
* 第三个参数，fun是一个回调函数，用来检查值是否按条件输入
* 第四个参数，click只是一个状态，分清楚是单击提交，还是失去焦点调用
*/
function check(obj,info,fun,click){
var sp = getTag(obj);
/**
* 对象获得焦点处理函数
*/
obj.onfocus=function(){
sp.innerHTML=info;
sp.className="stats2";
}
/**
* 对象失去焦点的处理函数
*/
obj.onblur=function(){
if(fun(this)){
sp.innerHTML=info;
sp.className="stats3";
}else {
sp.innerHTML="输入的用户名正确";
sp.className="stats4";
}
}
if(click =='click'){
obj.onblur();
}
}
//页面加载完自动调用
onload=regs;
/**
* 函数，可以使用onsubmit调用，也可以使用onload调用
*/
function regs(click){
var status = true;
var username = document.getElementsByName("username")[0];
var password = document.getElementsByName("password")[0];
var repass = document.getElementsByName("repass")[0];
var other = document.getElementsByName("other")[0];
check(username,"输入的用户名长度为3~10",function(obj){
if(obj.value.length<3 || obj.value.length>10){
status= false;
return true;
}else{
return false;
}
},click);
check(password,"输入的密码长度为4~12",function(obj){
if(obj.value.length<4 || obj.value.length>12){
status = false;
return true;
}else{
return false;
}
},click);
return status;
}