jquery验证插件，我如何验证一个字段但不需要它

Question

我正在使用 jquery 验证插件对表单进行客户端验证。

我有一个必填字段 StandardPrice，它必须是一个数字。下面的验证代码完美无缺。

我有一个名为 MinPrice 的表单中的另一个字段是可选的，但我确实想验证如果用户在其中放置了一些东西，那么它是一个数字。我想通过删除 required: true 但仍然有 number: true 它会支持这一点，但它似乎不允许我将此字段留空（即使我没有 required: true 设置）

jquery 验证插件是否支持在填充字段时验证字段，但如果字段为空则不处理。

这是我的代码：

 $("#productForm").validate({
     rules: {
         StandardPrice: {
             required: true,
             number: true
         },
         MinPrice: {
             number: true
         }
     }
 });

以下是字段为空时的验证截图：

这是我的 html 输出（我的实际代码使用了很多 HTML.helpers() 和 Html.ValidationMessageFor()

 <form action="/Product/EditProduct" id="productForm" method="post">    <fieldset>
    <legend>Product</legend>

    <div class="editor-label">
        <label for="Product_Name">Name</label>
    </div>

    <div class="editor-field">
        <input class="required" id="Product_Name" name="Product.Name" style="width:450px;" type="text" value="Linzer Tart" />
        <span class="field-validation-valid" data-valmsg-for="Product.Name" data-valmsg-replace="true"></span>
    </div>

    <div class="editor-label">

        <label for="Product_StandardPrice">StandardPrice</label>
    </div>
    <div class="editor-field">
        <input data-val="true" data-val-number="The field StandardPrice must be a number." data-val-required="The StandardPrice field is required." id="Product_StandardPrice" name="Product.StandardPrice" style="width:45px;text-align:right;" type="text" value="1.50" />
        <span class="field-validation-valid" data-valmsg-for="Product.StandardPrice" data-valmsg-replace="true"></span>
    </div>

    <div class="editor-label">
        <label for="Product_MiniPrice">MiniPrice</label>

    </div>
    <div class="editor-field">
        <input data-val="true" data-val-number="The field MiniPrice must be a number." data-val-required="The MiniPrice field is required." id="Product_MiniPrice" name="Product.MiniPrice" style="width:45px;text-align:right;" type="text" value="0.00" />
        <span class="field-validation-valid" data-valmsg-for="Product.MiniPrice" data-valmsg-replace="true"></span>
    </div>

    <input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Product_Id" name="Product.Id" type="hidden" value="102" />

    <p>
        <input type="submit" value="Save" />

    </p>
</fieldset>

Answer 1

number: true 应该如您所期望的那样工作，如 live demo 所示。

• 将该字段留空 => 表单提交
• 在字段中输入有效数字 => 表单提交
• 输入无效数字 => 显示错误消息且表单未提交

在显示您的标记后，您的字段名称和 jQuery 验证名称之间似乎有些不一致。例如，您的输入名为 Product.StandardPrice，而不是 StandardPrice，这是您在 jQuery.validate 中使用的名称。因此，您的任何验证规则实际上都不会适用，因为它没有任何相应的表单元素。所以修复它：

$("#productForm").validate({
     rules: {
         'Product.StandardPrice': {
             required: true,
             number: true
         },
         'Product.MiniPrice': {
             number: true
         }
     }
});

还要注意它应该是Product.MiniPrice 而不是Product.MinPrice。请保持一致。

备注：查看您的标记很明显，这是由 ASP.NET MVC 3 HTML 帮助程序生成的。为什么要使用自定义的 jQuery.validate 规则而不是默认的不显眼的规则？

Answer 2

请提供您的 html。这对我来说很好：

<input id="StandardPrice" name="StandardPrice" type="textbox" />
<input id="MinPrice" name="MinPrice" type="textbox" />

$("#productForm").validate({
 rules: {
     StandardPrice: {
         required: true,
         number: true
     },
     MinPrice: {
         number: true
     }
 }

});