修改驗證函數以接受變量

Question

我有一個函數（驗證），它在前端首先驗證正確的電子郵件格式（以避免大多數垃圾）。目前它驗證一個單一的領域，工作正常。我嘗試修改它來驗證任何字段類的「電子郵件」，因爲在同一頁上有幾個電子郵件字段。第二個函數（validateAny）部分工作，它驗證並顯示錯誤消息，但不會像在第一個（驗證）函數中那樣將錯誤類添加/移除到元素。我在這裏錯過了什麼？另外，我希望不要驗證該字段是否爲空，那麼我希望該檢查位於提交按鈕上。檢查jsfiddle

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
    return re.test(email); 
} 

function validate(){ 
    //$("#wrong-email-mess-create-process").text(""); 
    var email = $("#new-usr-name").val(); 
    if (validateEmail(email)) { 
    $("#new-usr-name").removeClass('error'); 
    $("#new-usr-name").prev().removeClass('error'); 
    $(".error-mess").fadeOut('fast'); 
    //$("#wrong-email-mess-create-process").text(email + " is valid :)"); 
    } else { 
    $("#new-usr-name").addClass('error'); 
    $("#new-usr-name").prev().addClass('error'); 
    $(".error-mess").fadeIn('fast'); 
    //$("#wrong-email-mess-create-process").text(email + " is not valid :("); 
    } 
    return false; 
} 

$("#new-usr-name").bind("blur", validate); 



function validateAny(efield){ 
    var email = $(efield).val(); 
    if (validateEmail(email)) { 
    $(efield).removeClass('error'); 
    $(efield).prev().removeClass('error'); 
    $(".error-mess").fadeOut('fast'); 
    } else { 
    $(efield).addClass('error'); 
    $(efield).prev().addClass('error'); 
    $(".error-mess").fadeIn('fast'); 
    } 
    return false; 
} 

$('.email').blur(function(){ 
    if(this.value) { 
    validateAny(this.id); 
    } 
}); 

Answer 1

我相信它是因爲你通過id而不是在blur事件中的字段。

$('.email').blur(function(){ 
    if(this.value) { 
    validateAny(this); 
    } 
}); 

或者在你的validateAny你需要添加id選擇，然後繼續使用整個功能的剩餘部分選擇的jQuery對象：

var $field = $('#' + efield); 
var email = $field.val(); 

更新小提琴：https://jsfiddle.net/d2wd6wh6/2/

Answer 2

似乎就像你將id傳遞給函數一樣，但是jQuery需要'＃'標識符來知道你想使用元素的id。試試這個：

function validateAny(efield){ 
    efield = '#' + efield; 
    var email = $(efield).val(); 
    if (validateEmail(email)) { 
    $(efield).removeClass('error'); 
    $(efield).prev().removeClass('error'); 
    $(".error-mess").fadeOut('fast'); 
    } else { 
    $(efield).addClass('error'); 
    $(efield).prev().addClass('error'); 
    $(".error-mess").fadeIn('fast'); 
    } 
    return false; 
}