jQuery驗證表單提交最大值

Question

我想驗證一個表單，當它被提交。我需要檢查以下內容：

1. 用戶是否從下拉列表中選擇了任何選項。
2. 用戶是否已進入比最高值

如果有任何的這個條件不匹配，我想表現出一個模式窗口中的錯誤消息更大的值...

如何我可以實現這種行爲嗎？下面的代碼片段：

//This function sets max value, based on selected option's data-max 
 
$('select').change(function(e) { 
 
    var selectedIndex = $('select').prop("selectedIndex"); 
 
    var selectedOption = $('select').find("option")[selectedIndex]; 
 
    $('input[type=number]').attr('max', $(selectedOption).data('max')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" action="./cart_update.php"> 
 
    Select Size: 
 
    <select size="1" name="options" class="selectsize"> 
 
    <option value="">-- Select --</option> 
 
    <option value="30" data-max="50">30</option> 
 
    <option value="31" data-max="50">31</option> 
 
    <option value="32" data-max="40">32</option> 
 
    <option value="33" data-max="50">33</option> 
 
    <option value="34" data-max="50">34</option> 
 
    </select> 
 
    Quantity 
 
    <input type="number" class="cart_qty" name="product_qty" size="1" value="1" min="1" max="100" /> 
 
    <button class="orange medium full add-to-cart" type="submit">Add To Cart</button> 
 
</form>

Answer 1

當你沒有給您是否驗證後端內的表單數據以及任何信息，我以爲你不知道。僅

1. 驗證表單數據在客戶端（即客戶端的web瀏覽器內）是不可取。這是因爲客戶可以輕鬆操縱您用來驗證數據的javascripte代碼。通過這樣做，是可能的將欺詐性數據導入您的應用程序（以及許多更糟糕的事情可能發生）。

2. 在客戶端驗證數據只能用於，以便用戶快速反饋確定輸入的信息是否正確並符合您的定義。真正的數據驗證，之前你進一步在你的應用程序中使用它（即存儲在一個數據庫，或任何曾經），應該發生在服務器端。

我建議你閱讀這些文章，以進一步深入瞭解數據驗證的話題：

1. Data form validation (mozilla.org)
2. 如果你使用PHP 爲服務器端語言：PHP 5 Form Validation (w3schools.com)或者如果您使用javascript 作爲服務器端語言：How to Easily Validate Any Form Ever Using AngularJS(thecodebabarian.com)
3. Web Form Validation: Best Practices and Tutorials (smashingmagazine.com)

來到你的問題（並假設您閱讀文章，現在要驗證的數據只爲用戶的緣故），這裏是怎樣的一個評價工作的代碼片斷：

$(document).ready(function() { 
    // Whenever your form is submitted, execute this function 
    $('#ourForm').submit(function (e) { 
     // Prevent the browser from executing the default behaviour -> submitting the form 
     e.preventDefault(); 
     // Now check the user's entered information for accordance to your definitions 
     // #1: Check whether any checkbox is ticked 
     var checkBoxValue = $('#ourCheckbox').val(); 
     // If checkBoxValue is undefined, there is no checkbox selected, 
     if (!checkBoxValue) { 
      // There is no checkBox ticked, throw error 
      alert('Please select a checkbox!'); 
      return false; 
     } 
     // #2: Check whether entered value is smaller than the data-max field of the selected checkbox 
     // Receive the user's entered value 
     var enteredValue = $('#ourInputfield').val(); 
     // Receive the max value specified by you from the data-max field 
     var maxValue = $('#ourCheckbox option:selected').attr('data-max'); 
     // If the entered value is bigger than the max-data value 
     if (enteredValue > maxValue) { 
      // The entered value is bigger than the data-max field of the selected checkbox, throw error 
      alert('Your entered value is to large, please choose a value lower than ' + checkBoxValue.value); 
      return false; 
     } 
     // Validating your form data is finsihed, go on with the real work 
     alert('Your data looks fine, whoooo!'); 
    }); 
}); 

這裏的工作JSFiddle：https://jsfiddle.net/77v1z18v/1/