jquery 验证规则和 autoNumeric 插件

Question

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

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

我还想对 LoanAmount 字段进行货币格式设置。因此，我使用了 autoNumeric 插件，如下所示：

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

但是，使用此插件后，loanAmount 的范围验证无法正常工作。 jquery 获取的是格式化值，而不是获取 LoanAmount 的原始值，因此无法进行验证。 例如，当我输入 25000 时，它会变成 25,000 并传递给 jquery，并且验证不会按预期进行。

有办法解决这个问题吗？

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

谢谢， 索拉布

Answer 1

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

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

下面是如何使用 AutoNumeric 为货币格式输入添加最小值验证的示例

# custom_validation.coffee

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

Answer 2

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

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

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

Answer 3

不幸的是，这是一个常见问题，没有现成的解决方案（据我所知）。

1. 您可以定义自己的验证方法，该方法将在执行检查之前首先“取消格式化”该值。 可以在此处找到示例。

2. 提交表单时，传递的值是否已格式化？在这种情况下，您可以定义验证规则来检查您的特定格式而不是纯范围，例如通过正则表达式。

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

希望这会有所帮助，d。

Answer 4

@Saurabh：我找到了解决方案。还有另一个插件可以完美地解决您面临的问题。您只需通过以下链接下载即可：

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

希望有帮助。

Answer 5

我今天遇到了同样的问题，这就是我的做法，首先我定义了新的自定义规则（针对货币）：

$.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();

在验证器方法中。