Javascript 使用jquery基于属性类型的表单验证

我正在进行表单验证，我想根据attr（type）一次性验证所有文本字段。像这样，我想验证一下

范例

 if($(myForm + " input").attr("type") == "email") {
// Validate Email Here
 }

我的代码运行得很好，但是如果我再添加一个额外的字段，我就不能进行多次验证。有人能帮助我如何进行上面提到的验证吗 任何帮助都将不胜感激

var验证程序=函数（表单）{
this.form=$（form）；
变量元素={
姓名：{
选择器：$（'input[type=text]'），
登记：/^[a-zA-Z]{2,20}$/
},
电邮：{
选择器：$（'input[type=email]'），
注册号：/^[a-z-0-9+.-]+\@（[a-z0-9-]+\.）+[a-z0-9]{2,7}$/i
},
信息：{
选择器：$（'textarea'），
注册号：/^\s+$/
}
};
var handleError=函数（元素、消息）{
元素addClass（'input-error'）；
var$err_msg=element.parent（'div'）；
变量错误=$（''）.text（消息）；
error.appendTo（$err\u msg）；
element.keyup（函数（）{
$（错误）.fadeOut（1000，函数（）{
element.removeClass（'input-error'）；
});
});
};
this.validate=函数（）{
此.form.submit（函数（e）{
for（元素中的变量i）{
var类型=i；
var验证=元素[i]；
开关（类型）{
案例“名称”：
if（！validation.reg.test（validation.selector.val（）））{
handleError（validation.selector，“不是有效名称”）；
}
打破
“电子邮件”案例：
if（！validation.reg.test（validation.selector.val（）））{
handleError（validation.selector，“不是有效的电子邮件地址”）；
}
打破
案例“信息”：
if（validation.reg.test（validation.selector.val（））| | validation.selector.val（）=''）{
handleError（validation.selector，“消息字段不能为空”）；
}
打破
违约：
打破
}
}
e、 预防默认值（）；
});
};
};
var validator=新的验证器（“#测试”）；
validator.validate（）
正文{
背景：#fff；
颜色：#333；
字体：76%Verdana，无衬线；
}
形式{
边距：1米0.2米；
宽度：90%；
}
字段集{
保证金：0；
边框：1px实心#ccc；
垫底：1米；
}
传奇{
字体大小：粗体；
文本转换：大写；
}
标签{
浮动：左；
宽度：5em；
右侧填充：2米；
字体大小：粗体；
}
div{
边缘底部：30px；
}
输入{
字体：1em Verdana，无衬线；
}
字段集ul li输入{
浮动：左；
宽度：120px；
边框：1px实心#ccc；
}
文本区{
宽度：300px；
高度：200px；
边框：1px实心#ccc；
字体：1em Verdana，无衬线；
}
表格p{
保证金：0；
填充：0.4em 0.7em；
}
表格p输入{
背景:#666；
颜色：#fff；
字体大小：粗体；
}
分区错误{
清除：左；
左边距：5.3em；
颜色：红色；
右侧填充：1.3em；
身高：100%；
垫底：0.3em；
线高：1.3；
}
.输入错误{
背景:#ff9；
边框：1px纯红；
}

联系方式
姓名：
电邮：
信息：

EDIT:Working fiddle，-并在提交处理程序中添加了一些简单的功能，以便在没有错误的情况下实际提交表单

这是JS部分，re。我的上述评论：

    var Validator = function(formObject) {
    this.form = $(formObject);

    var Elements = {
        name: {
            reg: /^[a-zA-Z]{2,20}$/,
            error: "Not a valid name.",
        },

        email: {
            reg: /^[a-z-0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,7}$/i,
            error: "Not a valid e-mail address.",
        },

        message: {
            reg: /^(?!\s*$).+/,
            error: "Message field cannot be empty.",
        },
    };

    var handleError = function(element, message) {
        element.addClass('input-error');
        var $err_msg = element.parent('div');
        var error = $('<div class="error"></div>').text(message);
        error.appendTo($err_msg);
        element.keyup(function() {
            $(error).fadeOut(1000, function() {
                element.removeClass('input-error');
            });
        });

    };

    this.validate = function() {
            var errorCount = 0;
        this.form.find("input, textarea").each(function(index, field){
            var type = $(field).data("validation");
            var validation = Elements[type];
            if (validation){
                if (!validation.reg.test($(field).val())){
                        errorCount++;
                    handleError($(field), validation.error);
                }            
            }
        })
            return errorCount == 0;
    };
};

$(function(){
    $("form#test").on("submit", function(event){
        //event.preventDefault();
        return new Validator(this).validate(); // "this" here refers to the form

    })
})

var Validator=函数（formObject）{
this.form=$（formObject）；
变量元素={
姓名：{
注册：/^[a-zA-Z]{2,20}$/,，
错误：“不是有效的名称。”，
},
电邮：{
注册号：/^[a-z-0-9+.-]+\@（[a-z0-9-]+\.）+[a-z0-9]{2,7}$/i，
错误：“不是有效的电子邮件地址。”，
},
信息：{
注册表：/^（？！\s*$）。+/，
错误：“消息字段不能为空。”，
},
};
var handleError=函数（元素、消息）{
元素addClass（'input-error'）；
var$err_msg=element.parent（'div'）；
变量错误=$（''）.text（消息）；
error.appendTo（$err\u msg）；
element.keyup（函数（）{
$（错误）.fadeOut（1000，函数（）{
element.removeClass（'input-error'）；
});
});
};
this.validate=函数（）{
var errorCount=0；
this.form.find（“输入，文本区域”）.each（函数（索引，字段）{
变量类型=$（字段）.data（“验证”）；
var验证=元素[类型]；
如果（验证）{
if（！validation.reg.test（$（field.val（）））{
errorCount++；
handleError（$（字段），validation.error）；
}            
}
})
返回errorCount==0；
};
};
$（函数（）{
$（“form#test”）。关于（“提交”，函数（事件）{
//event.preventDefault（）；
返回新的验证器（this）.validate（）；/“this”这里指的是表单
})
})

以下是已编辑的带有数据属性的HTML：

    <form action="#" method="post" id="test">

<fieldset>

<legend>Contact information</legend>


<div>
    <label for="name">Firstname:</label>
    <input type="text" name="firstname" id="firstname" data-validation="name" />
</div>


<div>
    <label for="lastname">Lastname:</label>
    <input type="text" name="lastname" id="lastname" data-validation="name" />
</div>

<div>
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" data-validation="email"/>

</div>

<div>
    <label for="message">Message:</label>
    <textarea id="message" name="message" cols="30" rows="15" data-validation="message"></textarea>
</div>

<p><input type="submit" name="send" id="send" value="Send" /></p>

</fieldset>


</form>


联系方式
名字：
姓氏：
电邮：
信息：

您不应该在表单字段而不是验证器上循环吗？按照现在的制作方式，您只能拥有与elements对象中元素数量相同的字段（目前为3个）。您应该运行表单字段，然后将每个表单字段传递到验证器（可能需要一些重写）。@cjs1978谢谢您能帮我做些什么吗我是jquery新手。事实上，我尝试了很多方法，但没有运气。如果你需要完全更改代码也没有问题，但条件将