如何使用jQuery Validate插件驗證電子郵件

Question

在某些情況下，jQuery Validate plugin對於電子郵件驗證並不完美。 「abc@test.c」（單字母后綴）和「중국어@ test.com」（非字母數字）作爲有效的電子郵件地址傳遞。

如何使用jQuery Validate插件過濾這兩個無效的電子郵件地址？

Answer 1

As per the documentation，您需要構建自己的自定義方法。

添加自定義驗證方法。它必須包含一個名稱（必須是一個 合法的JavaScript標識符），一個基於javascript的函數和一個默認字符串消息。

參數：

名;字符串用於標識和引用它的方法的名稱必須是有效的javascript標識符

方法;回調實際的方法實現，如果元素有效則返回true。第一個參數：當前值。第二個 參數：已驗證的元素。第三個參數：參數。

message（可選）;字符串，功能要爲此方法顯示的默認消息。可以是由 jQuery.validator.format（value）創建的函數。如果未定義，則使用已有的 消息（便於本地化），否則必須定義消息必須定義的字段特定消息 。

---

下面是一個自定義method我叫newemail。現在，它只是使用默認功能進行「電子郵件」驗證。只需編輯此功能中的正則表達式以滿足您的特定需求。

jQuery.validator.addMethod("newemail", function(value, element) { 
      // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ 
      return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value); 
}, "Please enter a valid email address"); 

然後在.validate()之內使用它，就像您使用任何其他規則一樣。

rules: { 
    InputName: { 
     required: true, 
     newemail: true 
    } 
} 

Answer 2

下面是使用remote:我的解決方案：

$("#myForm").validate({ 
    rules: { 
     femail: { 
      required: true, 
      email: true, 
      remote: "lib/ajax/checkEmail.php" 
     } 
    }, 
    messages: { 
     femail: { 
      required: 'Please input email', 
      email: 'Please input valid email', 
      remote: 'This email is duplicated/invalid, please re-input an email' 
     } 
    }, 
    submitHandler: function(form) { 
     form.submit(); 
    } 
}); 

在checkEmail.php，它實現了額外的邏輯來驗證特殊情況，那麼至少呼應要麼true或false的回報。

希望它有幫助。