jquery 验证规则和 autoNumeric 插件答案

【问题标题】：jquery validation rules and autoNumeric pluginjquery 验证规则和 autoNumeric 插件
【发布时间】：2011-10-05 14:02:27
【问题描述】：

我有一个如下所示的验证规则：

loanAmount:{required:true,number:true,range:[20000,500000]},

我还想为loanAmount 字段进行货币格式化。所以我使用了autoNumeric插件如下图：

$('#loanAmount').autoNumeric({dGroup:2});

但是，这样一来，loanAmount 的范围验证就无法正常工作。 jquery 没有获取loanAmount 的原始值，而是获取格式化的值，因此无法验证。例如，当我输入 25000 时，它变为 25,000 并传递给 jquery，并且验证没有按预期工作。

有没有办法解决这个问题？

如果有人可以提供帮助，我会很高兴。

谢谢，索拉布

【问题讨论】：

标签： jquery validation range rule

【解决方案1】：

我遇到了同样的问题，因为我同时使用了 autoNumeric 和 jQueryValidation。输入值可以在 jQueryValidation 中使用normalizer 进行编辑。

您可以使用addClassRules 函数根据类名进行这种排列。在下面的示例中，我只是删除了逗号。

$.validator.addClassRules( 'input_class_name', { normalizer: value => value.replaceAll( ',', '' ) } );

【讨论】：

【解决方案2】：

不幸的是，这是一个常规问题，没有开箱即用的解决方案（我不知道）。

您可以做的是定义自己的验证方法，在执行检查之前首先“取消格式化”值。你可以找到一个例子here。
提交表单时，传递的值是否格式化？在这种情况下，您可以定义验证规则来检查您的特定格式而不是纯范围，例如通过正则表达式。

我认为这是一个值得向插件开发人员提出的功能：一个可选的处理程序，将在验证值之前调用，例如可以取消格式化值。

希望这会有所帮助，d。

【讨论】：

【解决方案3】：

@Saurabh：我找到了解决方案。还有另一个插件可以很好地解决您面临的问题。您可以通过以下链接轻松下载：

https://www.customd.com/articles/14/jquery-number-format-redux
文档也在那里...

希望对您有所帮助。

【讨论】：

【解决方案4】：

我今天遇到了同样的问题，我就是这样做的，首先我定义了新的自定义规则（为了钱）：

$.validator.addMethod('moneyMinMax', function(value, element, params) {
    return this.optional(element) || (priceToNumber(value) >= params[0] && priceToNumber(value) <= params[1])
}, 'Please submit a value between {0} € & {1} €');

然后：

$myForm.validate({
    rules: {
        field_integer_classic: {
            required: true,
            max: 22,
            min: 2
        },
        field_money: {
            required: true,
            // call custom method added before with array [min, max]
            moneyMinMax: [200, 6000],
        },

我有一个简单的函数priceToNumber 来清理货币价值周围的格式。如果需要，您可以使用 AutoNumeric 中的 getNumericString()。

类似：

 var value = AutoNumeric.getAutoNumericElement(element).getNumericString();

在验证器方法中。

【讨论】：

【解决方案5】：

老问题，但如果有人发现这个问题，可以通过添加自定义验证来解决。你可以：

获取自动数字对象
获取 anElement（自动数字元素）的原始值

这是一个示例，说明如何使用 AutoNumeric 为货币格式的输入添加最小值验证

# custom_validation.coffee

$.validator.addMethod 'moneyMin', (value, element, minValue) ->
  anElement = AutoNumeric.getAutoNumericElement(element)
  amount = Number(anElement.rawValue)
  this.optional(element) || minValue < amount

【讨论】：