以良好和可靠的方式驗證表單輸入

我想在提交之前檢查用戶輸入。

例

HTML/PHP

<input type="text" name="adress" id="adress"> 
<input type="text" name="amount" id="amount">

，實際上Im做在Javascript以下

的Javascript

function dataValidation() { 
error=false; 
var adress = document.getElementById('adress').value; 
var amount = document.getElementById('adress').value; 
if (adress == ""){ 
error=true; 
} 
if (amount >0 && amount < 999){ 
} 
else { 
error=true; 
} 
if (error == false){ 
document.forms["myForm"].submit(); 
} 
}

所以，基本盟友此工作正常的我，但問題是，我要創建爲每個表單功能，並添加一個IF每個字段

因此，即時尋找一個更好的解決方案

理念1：添加列表至極提供類型的輸入，像

adress = not empty, 
amount = >0 && <999,

，然後創建一個函數，檢查與列表中的所有領域

思路2：標記或東西直接添加到輸入字段，它應該包含。然後創建一個功能，檢查所有的字段

有人有一個想法如何做到這一點，並希望幫助/建議我？

如果你有相同的字段多種形式

來源

2014-09-20 sgt_johnny

對於'address'適用的jQuery，你可以做這樣的事'<輸入type =「text」name =「adress」id =「adress」required>'。 – 2014-09-20 07:40:21

有幾十個或數百個JavaScript驗證框架。Google for'javascript驗證框架' – 2014-09-20 07:41:21

你可以通過jQuery的作爲試試這個：您的HTML：

<input type="text" name="adress" id="adress"> 
<input type="text" name="amount" id="amount"> 
    <input type="button" id="check_input">

，併爲所有輸入字段

$("#check_input").click(function() { 
     $("input").each(function() { 
      var element = $(this); 
     if(element.val() == "") { 
      element.css("border","1px solid red"); 
      element.attr("placeholder","Field is empty"); 
      return false; 
      } 

      }); 
      });

來源

2014-09-20 09:05:40 Dinesh

我接受這個答案，因爲它完美的工作。但是我發現了一個基於jQuery的數據報價工具，叫做「Parsely」 – 2014-09-20 18:25:04

嘗試調用驗證外部它會降低你的一些工作，除此之外，我不知道任何其他方法，所以讓我們等待別人回覆

來源

2014-09-20 07:40:25 himanshu

這不是一個很大的答案 - 它會更好地評論這個問題。 – 2014-09-20 07:42:04

你可能要考慮使用HTML5。

HTML5可以節省編寫JS驗證的時間。例如，要驗證電子郵件地址，您可以使用以下內容：

<input type="email" name="email" required />

請注意type =「email」和必填項。您可以使用正則表達式模式的HTML5表單屬性來代替使用js進行驗證。

例如，如果我想創造出只接受一個數字和3個大寫字母的輸入字段，我可以用它使用正則表達式模式很容易做到：

<input type="text" pattern="[0-9][A-Z]{3}">

閱讀一點點的HTML5和正則表達式。它可以幫助你。

來源

2014-09-20 07:48:44

如果用戶沒有html-5瀏覽器會怎麼樣？ – 2014-09-20 07:50:21

它不支持。您可以使用此腳本在舊的IE瀏覽器上啓用HTML5 API：https：//github.com/aFarkas/html5shiv – 2014-09-20 07:55:50

我認爲更好的方式來看待這個問題是通過使用HTML5和Sever端驗證（您必須使用以任何方式確保安全）。所有現代瀏覽器都支持HTML5，因此您的驗證工作。如果用戶使用不支持HTML5的瀏覽器，則服務器端驗證會引發錯誤。 – 2014-09-20 07:58:43

以良好和可靠的方式驗證表單輸入

回答

相關問題