檢查，如果輸入的文本字段包含在提交

Question

我有一個非常簡單的HTML網頁表單分鐘VAL ...

這是我在數據和序列化到JSON （並最終發送別的地方。但是，現在我正在使用console.log進行測試）。

當用戶填寫表格，然後然後點擊submit;我想簡單地檢查我的輸入文本字段的value，並確保用戶在-至少進入了一些更高然後0，但不0。

 <div> 
      <label>Age 
       <input type="text" name="age"> 
      </label> 
     </div> 

謹以此驗證，以之前運行，我的序列化功能，它下面的閃光。本質上，我想在發送數據之前檢查或驗證它。如果用戶輸入0，我不想發送。

以下是我的完整JavaScript。 （我仍然無法獲得上述的驗證功能）。

(function ($) { 
    $.fn.serializeFormJSON = function() { 

     var o = {}; 
     var a = this.serializeArray(); 
     $.each(a, function() { 
      if (o[this.name]) { 
       if (!o[this.name].push) { 
        o[this.name] = [o[this.name]]; 
       } 
       o[this.name].push(this.value || ''); 
      } else { 
       o[this.name] = this.value || ''; 
      } 
     }); 
     return o; 
    }; 
})(jQuery); 

$('form').submit(function (e) { 

     function validateForm(){ // would like to check before below fires for serialize 

      var form = document.getElementById("form"), inputs = form.getElementsByTagName("input"), 

      input = null, flag = true; 
      for(var i = 0, len = inputs.length; i < len; i++) { 
       input = inputs[i]; 
       // if the value is not a valid number or it's less than or equal 0 
       if(isNaN(input.value) || +input.value < 0) { 
        flag = false; 
        input.focus(); 
         console.log("error!"); 
        // break; 
       } 
      } 
      return(flag); 
     } 

    e.preventDefault(); 
    var data = $(this).serializeFormJSON(); 
    console.log(data); 

}); 

Answer 1

簡單驗證號碼輸入。嘗試這個。

$("#submit").on("click", function(){ 
 
    inputValue = $("input[name='age']").val(); 
 
    var num = parseInt(inputValue); 
 
    if(isNaN(num) || num <= 0){ 
 
    console.log(inputValue + " Invalid number!"); 
 
    } else { 
 
    console.log(inputValue + " Valid number!"); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <label>Age 
 
     <input type="text" name="age"> 
 
    </label> 
 
</div> 
 
<input type="button" id="submit" value="Submit"\>

Answer 2

爲了實現這個目標，我（或多或少），通常這樣做：

HTML

<form action="(action url)" id="form" method="post" onsubmit="return validateForm()"> 
    //form contents 
</form> 

JS

function validateForm() { // would like to check before below fires for serialize 
    //var form = document.getElementById("form"), inputs = form.getElementsByTagName("input"), 
    //If you use jQuery, it more preferred to write like this: 
    var form = $('#form'), inputs = form.find('input'), input = null, flag = true; 

    for(var i = 0, len = inputs.length; i < len; i++) { 
     input = inputs[i]; 
     // if the value is not a valid number or it's less than or equal 0 
     if(isNaN(input.value) || +input.value < 0) { 
      flag = false; 
      input.focus(); 
      console.log("error!"); 
     } 
     //do the break 
     if (!flag) break; 
    } 
    if (flag) { 
     var data = $(this).serializeFormJSON(); 
     console.log(data); 
    } 
    return flag; 
}