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/