首页 > 解决方案 > ParsleyJS 自定义数学验证器

问题描述

我已经成功地调整了 ParsleyJS 的部分内容以适应我的表单需求。现在我需要制作一些自定义数学验证器,但我很难弄清楚为什么我的验证器不起作用。

我需要完成的事情:

输入 1:x

输入 2:与 x 的差异不能超过 10

一个示例表格:

<form id="demo-form" data-parsley-validate="">

  <label for="input1">Input 1</label>
  <input type="text" class="form-control" id="input1" name="input1" required>

  <label for="input2">Input 2</label>
  <input type="text" class="form-control" id="input2" name="input2" required data-parsley-not-more-than="input1" data-parsley-trigger="keyup" data-parsley-validation-threshold="0">

  <input type="submit" class="btn btn-default pull-right">

</form>

从自定义验证器演示示例中,我认为它可以很容易地解决,如下所示:

window.Parsley.addValidator('notMoreThan', {
  validateNumber: function(value, requirement) {
    return (value - requirement) <= 10;
  },
  requirementType: 'integer',
  messages: {
    en: 'This value can not be more than 10 different from %s'
  }
});

但是.. Uncaught Requirement 不是整数:“input1”

美好的。然后我们将更改为字符串。

window.Parsley.addValidator('notMoreThan', {
  validateNumber: function(value, requirement) {
    return (requirement - value) <= 10;
  },
  requirementType: 'string',
  messages: {
    en: 'This value can not be more than 10 different from %s'
  }
});

但这总是返回 false,验证失败,无论输入是什么。

然后我查看 src/extra 目录中的附加项(大于、小于或等于),他们这样做:

// gt, gte, lt, lte, notequalto extra validators
var parseRequirement = function (requirement) {
  if (isNaN(+requirement))
    return parseFloat(jQuery(requirement).val());
  else
    return +requirement;
};

// Greater than or equal to validator
window.Parsley.addValidator('gte', {
  validateString: function (value, requirement) {
    return parseFloat(value) >= parseRequirement(requirement);
  },
  priority: 32
});

所以我猜,以我有限的 javascript 知识,如果它是“不是数字”,他们会“解释”要求值以返回正确的字符串。

所以,我尝试了同样的方法。

// gt, gte, lt, lte, notequalto extra validators
var parseRequirement = function (requirement) {
  if (isNaN(+requirement))
    return parseFloat(jQuery(requirement).val());
  else
    return +requirement;
};

// my not more than 10 different validator
window.Parsley.addValidator('notMoreThan', {
  validateString: function (value, requirement) {
    return ( parseFloat(value) - parseRequirement(requirement) ) <= 10;
  },
  priority: 32
});

但这也总是返回 false 。

我完全不知所措。这可能是我缺乏 javascript 技能。希望这个答案不会因此而被否决。我正在尽我所能去学习。

总之,我需要一个解决方案来根据字段使用简单的数学验证来制作自定义验证器。“字段 B 与字段 A 的差异不能超过 X”“字段 D 与 ((字段 C 除以 x) 减去 y) 的差异不能超过 f”等等。

希望有人可以帮助我。

标签: parsley.js

解决方案


我找到了解决方案,希望它可以帮助面临类似问题的人,因为这方面的新手缺乏文档。

   window.Parsley.addValidator('notMoreThan', {
       validateNumber: function(value, requirement) {
           // requirement is passing the id of the input 1 so ve have to obtain the value of it
           var requirement_value = $('#'+requirement).val() ;
           return value - requirement_value <= 10  ;
       },
       requirementType: 'string',
       messages: {
           en: 'This value can not be more than 10 different from %s'
       }
   });

为了完成这项工作,我们必须首先获得需求的值。这就是缺乏的。


推荐阅读