使用Parsley验证多个字段？(Validate multiple fields with Parsley?)

使用Parsley验证多个字段？(Validate multiple fields with Parsley?)

我有三个用于输入日期的文本输入字段。 我想验证这些，以确保它们一起是一个有效的日期。 我可以编写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">

从这个答案我怀疑答案是，这不是（简单）可能，但它似乎是一个非常普遍的需要，所以我想100％肯定！

I have three text input fields used for entering a date. I'd like to validate these to make sure they are, together, a valid date. I can write JavaScript to test that something is a date, but I can't see a way to use Parsley.js to validate multiple fields in one go, and provide a single error message.

My fields are like this:

<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">

From this answer I suspect the answer is that this isn't (simply) possible, but it seems like quite a common need, so I'd like to be 100% sure!

最满意答案

这大致是我最终得到的结果。 这是我的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">

我为每个字段添加了一个唯一的类，因此我可以获得它们的值。 并在日输入中添加了required和data-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");

任何建议超过欢迎！

Here's roughly what I've ended up with. This is my HTML now:

<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">

I've added a unique class for each field, so I can get their values. And added required and data-parsley-date to the day input.

Here's my JavaScript to add a validator that checks the combined fields to see if they make a valid date. I've included two utility functions used within the validator, for completeness. The validator relies on moment.js to check the final string for validity.

// 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");

Any suggestions more than welcome!