MVC4中文本框的验证答案

【问题标题】：Validation of Textbox in MVC4MVC4中文本框的验证
【发布时间】：2012-10-20 13:44:18
【问题描述】：

我有一个更新操作来根据我的文本框输入更新值。我使用 javascript 进行验证。脚本和验证仅适用于第一个文本框值。
我的查看代码

     @foreach (var item in Model)
      {     <tr>          
         <td align="right" class="Text_nocolor" valign="top">
      @using (Html.BeginForm("Update", "Cart", new { UserID = Request.QueryString["UserID"] }, FormMethod.Post, new { id = "myForm" }))
     {          
         @Html.Hidden("id", @Request.QueryString["UserID"] as string)
         @Html.Hidden("productid", item.ProductID as string)
         <input id="Quantity" type="text" class="Text_nocolor" name="Quantity" value="@item.Quantity"  onblur="return allownumbers() " maxlength="3"/>  
          @Html.Hidden("unitrate", item.Rate)               
          <input type="submit" value="Edit" class="Text_nocolor" onclick="return RegainFocus();" />
     }
       </td >
<tr>
    }

我使用的脚本：

 <script type="text/javascript">
    function RegainFocus() {
            if ((document.getElementById("Quantity").value).length == 0) {
                document.getElementById("Quantity").focus();
                alert("Quantity cannot be empty");
                document.getElementById("Quantity").value = document.getElementById("Quantity").defaultValue;
                return false;
            }
            else if ((document.getElementById("Quantity").value) > 100) {
                alert("There is no enough inventory for this product to fulfill your order");
                document.getElementById("Quantity").value = document.getElementById("Quantity").defaultValue;
                return false;
            }           
        }
            function allownumbers() {
                var val = parseInt(document.getElementById("Quantity").value);
                if (!val || val < 1) {
                    alert('Please enter a valid value');
                    document.getElementById("Quantity").value = document.getElementById("Quantity").defaultValue;
                    return false;                 
                }
                document.getElementById("Quantity").value = val;
                return true;
            }
    </script>

我还检查了我是否为文本框获得了不同的 ID。但是所有文本框都具有相同的 ID，并且验证不适用于除第一个文本框之外的其他文本框。
任何建议。

编辑 ::

  function allownumbers() {
            alert('fasfa');
            var elements = document.getElementsByName('Quantity');
            for (var i = 0; i < elements[i].length; i++) {  
                alert(elements);
                if (!elements || elements < 1) {
                    alert('Please enter a valid value');                    
                    return false;
                }
                else if (elements > 100) {
                    alert('Please enter a value less than 100');
                    return false;
                }
            }               
            return true;
        }

模型有值，每个文本框都包含值。但是元素只返回 NaN 作为值。

【问题讨论】：

标签： c# asp.net asp.net-mvc asp.net-mvc-3 validation

【解决方案1】：

您可以获取具有名称的元素并对其进行迭代；

var elements = document.getElementsByName('Quantity');
for(var i = 0; i < elements.length; i++){
    //validate elements[i].value
}

您可以给每个文本框唯一的 id（第一个解决方案更好）
使用 jQuery 验证插件

编辑：修复您的代码

function allownumbers() {
        var elements = document.getElementsByName('Quantity');
        for (var i = 0; i < elements.length; i++) {  
            if (elements[i].value == '' || elements[i].value < 1) {
                alert('Please enter a valid value');                    
                return false;
            }
            else if (elements[i].value > 100) {
                alert('Please enter a value less than 100');
                return false;
            }
        }               
        return true;
    }

小提琴：http://jsfiddle.net/kDVDb/

【讨论】：

document.getElementsByName('Quantity') 返回 NaN 作为值。
可能在 foreach 循环中模型中没有项目
elements > 100 100 ?
你的 fn 在 jsfiddle 中很好用。但我收到对象预期错误。当我运行相同的代码时，不会调用 fn 本身。
你引用了 jQuery 脚本吗？

【解决方案2】：

您不能有多个具有相同 ID 的 DOM 元素。在您的循环中，您需要为每个文本输入生成唯一的 ID，然后独立调用您的验证方法。

或者，您可以使用 jQuery 的 .each() 方法，该方法将遍历多个元素。比如：

$('input[name=Quantity]').each(function(index) {
    validation logic here
});

【讨论】：