我已经搜索了很长时间了,现在如何做最简单的jQuery验证。(更改边框颜色和背景)就是这样,没有别的了!没有文本或任何额外的东西。我看过很多方法,但是代码太长了。
下面是一个长代码的例子。我不认为这是有效的方式,如果我有超过10个字段来验证。
$(document).ready(function(){
//global vars
var form = $("#customform");
var name = $("#name");
var email = $("#email");
//On blur
name.blur(validateName);
email.blur(validateEmail);
//On key press
name.keyup(validateName);
//On Submitting
form.submit(function(){
if(validateName() & validateEmail())
return true
else
return false;
});
//validation functions
function validateEmail(){
//testing regular expression
var a = $("#email").val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
//if it's valid email
if(filter.test(a)){
email.removeClass("error");
return true;
}
//if it's NOT valid
else{
email.addClass("error");
return false;
}
}
function validateName(){
//if it's NOT valid
if(name.val().length < 4){
name.addClass("error");
return false;
}
//if it's valid
else{
name.removeClass("error");
return true;
}
}
});
感觉好像需要进行一些重构,并将一直重复的代码提取到自己的函数中:
function validateElement(element, condition) {
if(condition){
element.removeClass("error");
}
else {
element.addClass("error");
}
return condition;
}
像这样使用它(我还建议将变量转换为参数)您可以在不同的字段上使用验证器):
function validateEmail(field) {
//testing regular expression
var a = field.val(),
filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
return validateElement(field, filter.test(a));
}
validateEmail($('#email'));