//获取下一个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(); } //页面加载完自动调用 οnlοad=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; }
转载于:https://www.cnblogs.com/Aaron-dzl/p/5819383.html