使用IE9中的Jquery和Modernizr驗證HTML5表單

Question

在創建HTML5表單時，不幸的是，佔位符屬性在IE9中不起作用。 Modernizr幫助我解決了問題，但Modernizr的問題是創建佔位符屬性作爲輸入值，這限制了我驗證這些字段是空的。

要解決的驗證，我創建了下面的代碼：

$(".button").click(function(){ 
    var reEmail = /^[A-Za-z0-9][a-zA-Z0-9._-][A-Za-z0-9]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/; 
    var email = $("#email"); 
    var name = $("#name"); 
    if (name.val()=="Name [Required]" && name.val()==""){ 
    name.val(""); 
    name.focus(); 
    } else if (email.val()=="Email [Required]" && email.val()==""){ 
    email.val(""); 
    email.focus(); 
    } else if (!reEmail.test(email)){ 
     email.val(""); 
     email.focus(); 
    } else{ 
     alert("Thanks!"); 
    } 
}); 

但是，如果郵件是正確的

注意這甚至不工作：對不起，我的英語和我的JS代碼，我還在原地學習:)

Answer 1

有幾個問題與您的代碼。

flynfish已經確定了2個最重要的:)。

錯誤：

1. name is placeholder *OR* is empty而不是name is placeholder *AND* is empty

2. 變化(!reEmail.test(email))到(!reEmail.test(email.val()))檢查值

3. 你的正則表達式允許.，_和-只能作爲第2個字符。你也不是逃避.，所以它意味着任何字符，而不僅僅是一個點。也逃脫-因爲JSLint/JSHint討厭時，它是非轉義:)。

優化：

1. 您不必檢查電子郵件是佔位符或空字符串，因爲這兩個不正確的值將不會通過正則表達式測試。

2. 不要在JS代碼中硬編碼佔位符值。您可以通過使用name.attr('placeholder')訪問佔位符值。這樣，如果您更改佔位符文本，則不必修改JavaScript。

3. 我會建議使用新的<input type="email">元素和使用Moderznir與任何html5表格polyfils支持電子郵件輸入。這會讓你的工作變得更容易。您已經使用moderznizr和polyfills作爲佔位符，因此請檢查它是否也不支持電子郵件輸入驗證。

Answer 2

有幾件事情我看是你的代碼錯誤：

1. 喲你正在檢查val是否等於「電子郵件[必填]和空字符串..這是無效的，因爲他們不能同時在這兩個。

2. 在電子郵件測試，你需要測試針對email.val（）不是jQuery選擇

   (!reEmail.test(email))應該(!reEmail.test(email.val()))

Answer 3

如果您仍然有困難，那麼我建議你使用這個小jQuery腳本：

http://uniquemethod.com/html5-placeholder-text-with-modernizr-and-jquery-fallback

它與IE9我MailChimp形式完美的作品。