有史以來最簡單的javascript表單驗證問題

我有一個名稱和一個電子郵件地址的表單。如果用戶在字段中鍵入任何內容，即使是一個字符，我也希望一個簡單的圖標出現在表單的右側。如果現場有任何東西，我希望成功圖標出現。如果用戶前進到沒有輸入的下一個字段，我想要顯示失敗圖標。有誰知道一些超級簡單的JavaScript來做到這一點？我發現的一切都太先進，功能也很豐富。有史以來最簡單的javascript表單驗證問題

來源

2009-10-24 JCHASE11

如何：

var field = document.getElementById('myFormField'); 
var icon = document.getElementById('myIcon'); 

field.onchange = function(){ 
    icon.src = this.value ? 'success.png' : 'fail.png'; 
};

（我還沒有測試過這個）

基本上，它說：每當文本字段用戶更改，請檢查該字段的value 。如果該字段未填寫，則value將爲false。圖標的src屬性隨後會相應更改。

對於其他類型的表單字段（例如選擇），您可能需要與value不同的屬性。但是如果你使用jQuery，你可以簡單地使用.val()。

您可能想要添加更復雜的支票 - 例如，如果value只包含空格。

來源

2009-10-24 22:34:02 Premasagar

我使用jQuery和我也嘗試這樣做，我不能得到它的工作，你能寫一些基本的HTML與此一起去，所以我可以看到它是如何工作的？應該添加一個表單ID並將其稱爲myFormField？然後，我在myIcon的html中做什麼？我有點困惑，你能不能把它分解一點給我？ THanks – JCHASE11 2009-10-24 23:06:57

我在想你有這樣的東西（這只是一個精簡版 - 你可能在HTML中有更多的屬性和細節）：'

' 。您可能希望通過JavaScript添加圖標，因爲在用戶與表單交互之前不需要顯示任何內容，而且如果瀏覽器不使用JavaScript，則不需要該圖標。 – Premasagar 2009-10-24 23:18:21

是HTML的片段有用嗎？如果您仍然遇到問題，請隨時發佈代碼的精簡部分，我們可以看到如何使其全部發揮作用。 – Premasagar 2009-10-26 21:51:58

1）首先，安裝jQuery並將其包含在您的網站上。縮小它的體積很小，並且它使javascript更簡單。

2）我假定HTML是：

< INPUT TYPE = 「文本」名稱= 「名」 ID = 「編輯名稱」類= '文本字段'/>
< IMG SRC =」 'id ='edit-name-succeed'style =「display：none;」 />
< img src ='something'id ='edit-name-fail'style =「display：none;」 />
< input type =「text」name =「email」id =「edit-email'class ='text-field'/>
< img src ='something'id ='edit-email-succeed'風格= 「顯示：無;」/>
< IMG SRC = '東西' ID = '編輯電子郵件失敗' 的風格= 「顯示：無;」隨後/>

3）我的JavaScript將是：


$('input.text-field').change(function() {  
    if ($(this).text()) { 
    $('#' + $(this).attr('id') + '-fail').hide(); 
    $('#' + $(this).attr('id') + '-succeed').show(); 
    } 
}); 
$('input.text-field').blur(function() { 
    if (!($(this).text())) { 
    $('#' + $(this).attr('id') + '-fail').show(); 
    $('#' + $(this).attr('id') + '-succeed').hide();  
    } 
});

來源

2009-10-24 22:41:02

我試過這個，並沒有工作。我似乎不能把我的代碼放在這裏給你看，但在JavaScript中，我改變的是ID？這與html有關？ – JCHASE11 2009-10-24 23:01:46

有史以來最簡單的javascript表單驗證問題

回答

相關問題