如何客戶端實時驗證與選擇，收音機，複選框，文本，文件輸入，只使用JavaScript？

我有一個用戶配置頁面，有很多表單輸入。我想要實時驗證輸入以避免當用戶輸入文本輸入時檢查格式錯誤，檢查文件名並在用戶輸入select，radio，checkbox時彈出一些信息。我只是想用方法shuold知道我用於上面的每個類型輸入。如何客戶端實時驗證與選擇，收音機，複選框，文本，文件輸入，只使用JavaScript？

來源

2016-08-02 Kris Roofe

查找'onchange'每個的輸入，選擇等事件收件JS功能用於確認每個輸入。 –

我可以使用可點擊輸入的onclick嗎？ –

是的，但我認爲這樣做沒有意義。試試看這裏例如 - http://www.the-art-of-web.com/javascript/validate/ - 它可能會給你點如何驗證表單。 –

你必須編寫一個邏輯來爲你做驗證。一旦你寫完了，你可以使用jQuery的事件，只要你輸入一些東西就可以調用這個函數。

例如，下面的代碼段會在您開始輸入時立即進行實時驗證。如果輸入的文字只包含字母，那麼就不會有錯誤（如果有的話，它會消失），只要你輸入了任何數字，它就會顯示錯誤。

$("#only-text").on("keyup", function() { 
 
    realTimeValidate(); 
 
}); 
 

 
function realTimeValidate() { 
 
    var inputField = document.getElementById("only-text").value; 
 
    
 
    if(!isAlphaOrParen(inputField)) 
 
     document.getElementById("showerror").innerHTML = "Please enter only numbers"; 
 
    else 
 
     document.getElementById("showerror").innerHTML = ""; 
 
} 
 
     
 
function isAlphaOrParen(str) { 
 
    return /^[a-zA-Z()]+$/.test(str); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
Type only Text (error will be generated if you type a number) : <br><input id="only-text" type="text"/><br> 
 
<span id="showerror" style="color:red"></span>

來源

2016-08-02 09:00:26

是的，看起來不錯，我會試試看。其他輸入類型如何？ –

for'type =「radio'，'type =」select「'和'type =」checkbox「'，你可以使用javascript的onchange =」yourFunction（）「'。有很多方法可以做到這些只是谷歌''輸入onchange實時事件'' –

與你上面提到的這些輸入類型，我可以使用onclick來替換onchange –

如何客戶端實時驗證與選擇，收音機，複選框，文本，文件輸入，只使用JavaScript？

回答

相關問題