【问题标题】:Validate multiple fields with Parsley?用 Parsley 验证多个字段?
【发布时间】:2015-02-07 14:24:09
【问题描述】:

我有三个用于输入日期的文本输入字段。我想验证这些以确保它们在一起是一个有效的日期。我可以编写 JavaScript 来测试某事是日期,但我看不到使用 Parsley.js 一次性验证多个字段并提供单个错误消息的方法。

我的字段是这样的:

<input type="number" name="date-day" value="" maxlength="2">
<input type="number" name="date-month" value="" maxlength="2">
<input type="number" name="date-year" value="" maxlength="4">

来自this answer,我怀疑答案是(简单地)不可能,但这似乎是一个很普遍的需求,所以我想百分百确定!

【问题讨论】:

  • 您是否尝试过创建自定义验证器? parsleyjs.org/doc/examples/customvalidator.html
  • 请问为什么需要三个字段?是否有理由不将字段与日期选择器一起使用?
  • 我认为日期选择器对于大致“现在”的日期是有意义的,但这是一个出生日期,这会使过程更加费力。我们也选择了三个领域而不是一个领域,因为像这样的研究designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth
  • 我现在可以使用自定义验证器进行此操作 - 稍后我会在有机会时发布答案。我希望文档更好:(

标签: javascript validation parsley.js


【解决方案1】:

这大概是我最终得到的结果。这是我现在的 HTML:

<input type="number" name="dob-day" value="" maxlength="2" class="js-dob-day" required="required" data-parsley-date="js-dob">
<input type="number" name="dob-month" value="" maxlength="2" class="js-dob-month">
<input type="number" name="dob-year" value="" maxlength="4" class="js-dob-year">

我为每个字段添加了一个唯一的类,因此我可以获取它们的值。并将requireddata-parsley-date 添加到日期输入中。

这是我的 JavaScript,用于添加一个验证器,用于检查组合字段以查看它们是否为有效日期。为了完整起见,我在验证器中包含了两个实用程序函数。验证器依赖moment.js 来检查最终字符串的有效性。

// Is `n` a number or numeric string (eg "3")?
function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
};

// Pad `n` with `z` (or `0` by default) to `width`.
function zeroPad(n, width, z) {
    z = z || '0';
    n = n + '';
    return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
};


window.ParsleyValidator
    .addValidator(
        // Name of our validator.
        'date',

        // `value` will be the value entered into the day field.
        // `requirements` will be "js-dob" in our example.
        function(value, requirements) {
            var day     = $('.'+requirements+'-day').val(), // or value
                month   = $('.'+requirements+'-month').val(),
                year    = $('.'+requirements+'-year').val();

            if (isNumeric(day) === false
                || isNumeric(month) === false
                || isNumeric(year) === false) {
                return false;
            };

            day     = zeroPad(day, 2);
            month   = zeroPad(month, 2);
            year    = zeroPad(year, 4);

            // Use moment.js to make a date which we can then test for validity.
            var date = moment(year+'-'+month+'-'+day, 'YYYY-MM-DD');

            if (date.isValid()) {
                return true;
            } else {
                return false;
            };
        },

        // priority. Not sure how this works.
        34
    )
    .addMessage('en', 'date', "Enter a valid date");

欢迎提出任何建议!

【讨论】:

  • 但是如果使用此代码,如果更改月份或年份,验证不会再次运行,仅在当天更改时运行?
  • @oriaj 将 data-parsley-date="js-dob" 添加到月/年输入将有所帮助
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-12-30
  • 1970-01-01
  • 2018-01-25
  • 1970-01-01
  • 1970-01-01
  • 2017-03-11
相关资源
最近更新 更多