//获取下一个span,可以通过这个对象给状态
function gspan(cobj){
while(true){
if(cobj.nextSibling.nodeName!="SPAN")//因为有可能input标签后可能有空格再接span,或者中间有其它标签,但是我们要改的是span的内容,所以要获得input对应的span;
cobj=cobj.nextSibling;
else
return cobj.nextSibling;
}
}
/*
通用检查方法
第一个参数:obj, 是用来检查的对象
第二个参数:info, 是用来检查的提示信息
第三个参数: fun, 是一个回调函数,用来检查值是否按条件输入。因为一个变量不能解决判断是否value值符合要求,所以用函数作为参数。
第四个参数: click只是一个状态, 分清楚是单击提交按,还是失去焦点。因为check里面的离开焦点,在单击提交时每一个都没有离开焦点,所以不会调用check里面的离开焦点函数;
*/
function check(obj, info, fun, click){
var sp=gspan(obj);
obj.onfocus=function(){ //一旦获得焦点,就要变提示信息以及颜色;
sp.innerHTML=info;
sp.className="stats2";//stats表示几个状态不同的字体颜色;
}
obj.onblur=function(){//一旦失去焦点,就要检查这个value值,通过fun回调函数。
if(fun(this.value)){//如果符合规则,则回调函数返回真,提示信息变为“输入正确”并改变颜色;
sp.innerHTML="输入正确";
sp.className="stats4";
}else{
sp.innerHTML=info;
sp.className="stats3";
}
}
if(click=="click")//如果是单击提交按钮的,就手动条用onblur方法
obj.onblur();
}
//页面加载完自动调用
onload=regs
//一个函数,可以使用onsubmit调用, 也可以使用onload调用
function regs(click){
var stat=true;//因为表单是否提交要通过判断其是否通过验证,返回stat给提交事件。
var username=document.getElementsByName("username")[0];
var password=document.getElementsByName("password")[0];
var repass=document.getElementsByName("repass")[0];
var email=document.getElementsByName("email")[0];
var other=document.getElementsByName("other")[0];
check(username, "用户名的长度要在3-20之间", function(val){
if(val.match(/^\S+$/) && val.length >=3 && val.length <=20){
return true;
}else{
stat=false;
return false;
}
}, click);
check(password, "密码必须在6-20位之间", function(val){
if(val.match(/^\S+$/) && val.length >=6 && val.length <=20){
return true;
}else{
stat=false;
return false;
}
}, click);
check(repass, "确定密码要和上面一致,规则也要相同", function(val){
if(val.match(/^\S+$/) && val.length >=6 && val.length <=20 && val==password.value){
return true;
}else{
stat=false;
return false;
}
}, click)
check(email, "要按邮箱规则输入", function(val){
if(val.match(/\w+@\w+\.\w/)){
return true;
}else{
stat=false;
return false;
}
}, click)
return stat;
}