如何使用jQuery驗證表單？

我試圖找到其他問題的答案，但實際上沒有任何工作 - .-不知何故，我討厭JavaScript ......無論如何！我的代碼如下所示：如何使用jQuery驗證表單？

function validate() 
{ 
if ($(":input").length == 0) 
{ 
    $(":input").addClass("notvalid"); 
    return false; 
} 
else 
{ 
    $(":input").removeClass("notvalid"); 
    return true; 
} 

return true; 
} 

$(":input").blur(validate()); 
$(":input").keyup(validate()); 

$("#customForm").submit(function(){ 
if(validate()){ 
    return true; 
} 
else 
{ 
    return false; 
} 
});

我只是想測試每個標記爲非空。測試應在焦點丟失或每種按鍵類型之後進行。當然點擊提交按鈕後。

它不起作用。 Firefox的錯誤控制檯說：類似未知的僞類或僞元素「輸入」。這是什麼意思？

來源

2010-05-25 Andre

如果您更熟悉PHP等服務器端腳本，則可以使用AJAX驗證您的字段。

回到這裏的JS什麼，我認爲你要做到：

$("input:text").bind("blur, keyup", function(){ 
    if($(this).val().length > 0){ 
    //Valid not empty 
    $(this).removeClass("notvalid");  
    }else{ 
    //invalid empty 
    $(this).addClass("notvalid"); 
    } 
}); 

$("#customForm").submit(function(){ 
    $("input:text").keyup(); //triggers the keyup event on input fields 
         //which then validates your fields according the 
         //code above. 

    if($("form .notvalid").length > 0){ 
    //You got some invalid fields in form 

    return false; 
    }else{ 
    //All fields are valid continue 

    return true; 
    }

}）;

它可能看起來與你的方法完全不同，但如果你想學習jQuery，最好熟悉它。我評論了一些過程，但如果您對以上代碼中使用的方法或函數有任何疑問，那麼您只需將它谷歌即可。祝你好運！

來源

2010-05-25 06:45:15 Pablo

錯誤表示jQuery不知道用:input選擇哪些元素。只需在您的選擇器中替換:input而不是input:text。你也可以看看jquery.validate插件，這將簡化你的驗證邏輯。有很多demos on the site應該幫助你開始。

UPDATE：

我的錯。根據文檔，有:input選擇器。

來源

2010-05-25 06:22:43

我認爲jquery.com上的jquery文檔是正確的。我試過了，現在'文字'這個詞不被識別...... – Andre 2010-05-25 06:24:46

@vlad，是的，你是對的，我的錯誤。 – 2010-05-25 06:27:43

相反的：

function validate() 
{ 
if ($(":input").length == 0) 
{ 
    $(":input").addClass("notvalid"); 
    return false; 
} 
else 
{ 
    $(":input").removeClass("notvalid"); 
    return true; 
} 

return true; 
}

用途：

function validate() 
{ 

$(":input").each(function(){ 
    if ($(this).val() === '') 
    { 
    $(this).addClass("notvalid"); 
    return false; 
    } 
    else 
    { 
    $(this).removeClass("notvalid"); 
    return true; 
    } 
}); 

return true; 
}

來源

2010-05-25 06:25:19 Sarfraz

好多了，謝謝。有趣的是，簡單地'輸入'不會在控制檯中發生任何錯誤。無論如何！現在他在jquery本身有一些問題。一些元素'd'沒有被定義或者是...... – Andre 2010-05-25 06:27:58

如果您使用jQuery已經應該要使用jquery.validate插件像達林說。

這將使您的代碼更清潔，更容易添加標準驗證規則，如有效的電子郵件，網址，最短長度，最大長度等。此外，無需爲您添加和刪除類。

來源

2010-05-25 06:32:26 Daveo

如何使用jQuery驗證表單？

回答

相關問題