最も単純なjQueryの検証|境界線とテキストなしのテキストのみ？

Question

私は今、最も単純なjQueryの検証方法を探しています。 （境界線の色と背景を変更する）それだけです、何もありません！テキストや余分なものはありません。私は多くの方法を見てきましたが、コードは長すぎます。

ここに長いコードの例を示します。私はそれが有効であると思っていない。

$(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; 
    } 
} 
}); 

Answer 1

あなたには、いくつかのリファクタリングを必要とし、独自の機能にすべての時間を繰り返し取得するコードを抽出したかのように臭い：

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'));