自己写JS通用表单验证V1.0，其实就是那么回事

闲着无聊写JAVA快写吐血了，哎，换换口味吧，顺手就操起了很久都没看了JavaScript。写点儿什么好呢？感觉表单验证还是实在些（错了，是非常实用，试想下你每次判断用户输入是何等的繁琐）因为JavaScript也实在是干不了什么了（是我用它干不了什么），不过还得学好它，JavaScript很好很强大，而且进入初进公司听说掌握这个挺重要的，好了，废话少说，先看程序,很简单的，大牛可以自觉关闭

/*
 *通用表单验证1.0
 *
 *作者：renyanwei
 *版本：1.0
 *修改日期：2008-10-27
*/

//用于放置验证失败的控件集合
var erritem=new Array();

//验证成功消息
var sucstr="√";

//错误信息集合，如果控件没指定错误信息容器
//将统一在警告框中显示
var errmsg="";

//各就各位
function fun(form)
{
	
    var formobj=document.getElementById(form);  //得到表单对象
    var iarray=formobj.getElementsByTagName("input");
    
    for(var i=0;i<iarray.length;i++)
    {
        var check=iarray[i].getAttribute("check");        
        switch(check){
            case "charcount":
                  erritem[i]=CharCount_fun(iarray[i]);
            break;
            case "numrange":
                  erritem[i]=NumRange_fun(iarray[i]);
            break;
            case "comparison":
                  erritem[i]=Comparison_fun(iarray[i]);
            break;
			case "regex":
				  erritem[i]=Common_fun(iarray[i]);
            default:
                  erritem[i]=true;
            break;
        }
    }
    if(errmsg!="")
    {
        alert(errmsg);
        errmsg="";
    }
    return reform();
}
/*
 *验证字符范围方法
 *maxsize：最大个数
 *minsize：最小个数
 *errmsg:验证失败的错误信息
 *msgdiv：用于显示错误信息容器，如果没有则弹出警告框
*/
function CharCount_fun(inp)
{
    var max=inp.getAttribute("maxsize");
    var min=inp.getAttribute("minsize");
    var msgdiv=document.getElementById(inp.getAttribute("msgdiv"));
    var errmsg=inp.getAttribute("errmsg");
	var val=inp.value.replace(/^\s+|\s+$/,"");
    var leng=val.length;
    if(leng<min||leng>max)
    {
        return showmsg(msgdiv,errmsg,false);
    }else{
        return showmsg(msgdiv,sucstr,true);
    }
}
/*
 *验证数字范围方法
 *maxnum：最大值
 *minnum：最小值
 *errmsg:验证失败的错误信息
 *msgdiv：用于显示错误信息容器，如果没有则弹出警告框
*/
function NumRange_fun(inp)
{
    var max=inp.getAttribute("maxnum");
    var min=inp.getAttribute("minnum");
    var msgdiv=document.getElementById(inp.getAttribute("msgdiv"));
    var errmsg=inp.getAttribute("errmsg");
    var val=inp.value;
    if(isNaN(val)||val<min||val>max)
    {
        return showmsg(msgdiv,errmsg,false);
    }else{
        return showmsg(msgdiv,sucstr,true);
    }
}
/*
 *比较验证方法，比较两个控件值
 *to:要与之比较的控件ID
 *errmsg:验证失败的错误信息
 *msgdiv：用于显示错误信息容器，如果没有则弹出警告框
*/
function Comparison_fun(inp)
{
    var msgdiv=document.getElementById(inp.getAttribute("msgdiv"));
    var errmsg=inp.getAttribute("errmsg");
    var toid=document.getElementById(inp.getAttribute("to"));
    var val=inp.value;
    if(val!=toid.value||val=="")
    {
        return showmsg(msgdiv,errmsg,false);
    }else{
        return showmsg(msgdiv,sucstr,true);
    }
}
/*
 *正则表达式验证方法
 *regstr:正则表达式，无前后\\
 *errmsg:验证失败的错误信息
 *msgdiv：用于显示错误信息容器，如果没有则弹出警告框
*/
function Common_fun(inp)
{
    var msgdiv=document.getElementById(inp.getAttribute("msgdiv"));
	var reg=new RegExp(inp.getAttribute("regstr"));
    var errmsg=inp.getAttribute("errmsg");
    var val=inp.value;
    if(!reg.test(val))
    {
        return showmsg(msgdiv,errmsg,false);
    }else{
        return showmsg(msgdiv,sucstr,true);
    }
}
//显示消息方法
function showmsg(msgdiv,msg,istrue)
{
    if(msgdiv==null)
    {
        errmsg+=msg+"\n";
    }else{
        msgdiv.innerHTML=msgdiv.innerHTML+"<font color='red'>"+msg+"<font>";
    }
    return istrue;
}
//总体验证方法，遍历所有控件是否同时通过验证
function reform()
{
    for(var i=0;i<erritem.length;i++)
    {
        if(!erritem[i])
        {
            return false;
        }
    }
    return true;
}

有兴趣的可以看下实例

---------点击查看---------

 

总结：这里主要是用到了HTML控件的自定义属性，重点应用了getAttribute方法，然后得到属性进行校验，哎 写个JS比写个java程序累多了，因为JavaScript实在是没什么好的调试工具，有的错误还莫名其妙，很是让人崩溃，总之不管好坏总是写出了个能运行的锥形，O(∩_∩)O哈哈~ ，挺高兴的，版本号暂定为1.0

还没解决的问题：根据校验类型自动注册onblue事件，光标进入后清除错误信息，还得靠事件驱动，这点儿确实很难为我，FF和IE还不一样，哎，不过没有真的不爽，等到2.0的时候一定得添加上去

评论

4 楼 yeseruanchong 2008-10-29  

向前辈们 多多学习！！

3 楼 renyanwei 2008-10-29  

Fly_m 写道

不错哈，完全靠自己的思想来做的。我也想做一个，就是不知道怎么开头。
不过，你可以研究一个网易的表单验证js框架form.js,这个对你现在的表单验证有很大的帮助，而且更加科学。

非常感谢

2 楼 yushan 2008-10-29  

很好 很强大 收藏了

1 楼 Fly_m 2008-10-28  

不错哈，完全靠自己的思想来做的。我也想做一个，就是不知道怎么开头。
不过，你可以研究一个网易的表单验证js框架form.js,这个对你现在的表单验证有很大的帮助，而且更加科学。