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 应该如您所期望的那样工作，如现场演示所示。

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

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

$("#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
     }
 }

});