日期:2014-05-16  浏览次数:20382 次

Javascript 简易Form表单验证模块 可扩展
FV = {
	    errMsg: {
        //检查特定字段是否为必填
        required: {
            msg: "该字段为必填项.",
            test: function(obj, load) {
                //确保字段尚未有内容输入,并在页面加载时不作检查
                return obj.value.length > 0 || load;
            }
        },
        //确保字段内容是正确的email地址
        email: {
            msg: "Email地址格式不正确.",
            test: function(obj) {
                //确保有内容的输入并符合email地址的格式
                return !obj.value || /^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/i.test(obj.value);
            }
        },
        //确保字段内容符合MM/DD/YYYY的时间格式
        date: {
            msg: "日期格式不正确",
            test: function(obj) {
                //确保输入了内容并检查是否符合MM/DD/YYYY的时间格式
                return !obj.value || /^\d{2}\/\d{2}\/\d{2,4}$/.test(obj.value);
            }
        },
        //确保字段内容是一个正确的URL
        url: {
            msg: "URL格式不正确",
            test: function(obj) {
                //确保有文本的键入,而且不是默认的http://文本
                return !obj.value || obj.value == 'http://' ||
                    //确保它是一个正确的URL
                    /^https?:\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$/.test(obj.value);
            }
        },
		//确保字段内容是一个整数
		integer: {
			msg: "请输入整数",
			test: function(obj){
				//确保有文本的键入且符合整数格式
				return !obj.value || /^\d+$/.test(obj.value);
			}
		}
    },
    markRequiredFiled: function() {
	    $("input.required").prev("label").addClass("required");
    },
    //验证表单所有字段的函数
    //form参数应是一个表单元素的引用
    //load参数应该是一个布尔值,用以判别验证函数在页面加载时执行还是动态执行
    validateForm: function(form, load) {
        var valid = true;

        //遍历表单的所有字段元素
        //form.elements是表单所有字段的一个数组
        for (var i = 0, len = form.elements.length; i < len; i++) {
            //先隐藏任何错误信息,以防不意的显示
           FV.hideErrors(form.elements[i]);

            //检查字段是否包含正确的内容
            if (FV.validateField(form.elements[i], load)) {
                valid = false;
            }
        }

        //如果字段是不正确的内容返回false,反之返回true
        return valid;
    },
    //验证单个字段的内容
    validateField: function(element, load) {
        var errors = [];

        //遍历所有可能的验证技术
        for (var name in FV.errMsg) {
            //查看字段是否有错误类型指定的class
            var re = new RegExp("(^|\\s)" + name + "(\\s|$)");
            //检查元素是否带有该class并把它传递给验证函数
            if (re.test(element.className) && !FV.errMsg[name].test(element, load)) {
                //如果没有通过验证,把错误信息增加到列表中
                errors.push(FV.errMsg[name].msg);
            }
        }
        //如果存在错误信息,则显示出来
        if (errors.length) {
            FV.showErrors(element, errors);
        }

        //如果字段始终没有得到验证,返回false
        return errors.length > 0;
    },
    //隐藏当前正显示的任何错误信息
    hideErrors: function(element) {
        //获取当前字段的下一个元素
        var next = element.nextSibling;

        //如果下一个元素是ul并有class为errors
        if (next && next.nodeName == "UL" && next.className == "errors") {
            //删掉它(这是我们“隐藏”的含义)
            element.parentNode.removeChild(next);
        }
    },
    //显示表单内特定字段的错误信息
    showErrors: function(element, errors) {
        //获取当前字段的下一个元素
        var next = element.nextSibling;

        //如果该字段不是我们指定的包含错误的容器
        if (next && (next.nodeName != "UL" || next.className != "errors")) {
            next = document.createElement("ul");
            next.className = "errors";
            //并在DOM中把它插入到恰当的地方
            element.parentNode.insertBefore(next, element.nextSibling);
        }

        //现在有了一个包含错误的容器引用,我们可以遍历所有的错误信息了
        for (var i = 0; i < errors.length; i++) {
            //为每一条错误信息创建新的li包裹器
            var li = document.createElement("li");
            li.innerHTML