表单验证-JS实现

//获取下一个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;
}

View Code

转载于:https://www.cnblogs.com/Aaron-dzl/p/5819383.html