Question

我试图弄清楚如何将这个regEx应用于一个日期，一旦regEx与输入值匹配，它就表示输入有效。

HTML

<input
  type="text"
  name="purchasedate" 
  id="purchasedDatePicker" 
  required="yes" 
  mask="99/99/9999"
>

JS

$(document).on('change blur keyup mouseup click', function() {
  var textDate   = $('#purchasedDatePicker');
  var dateString = $('#purchasedDatePicker').val();
  var date_regex = /^(0[1-9]|1[0-2])\/(19|20)\d{2}$/;
    if (dateString == date_regex) {
      $('#purchasedDatePicker').valid();
    }
});

$("#purchasedDatePicker").datepicker({maxDate: new Date()});

不幸的是，只要输入不为空，我只会允许任何事情通过。任何想法或建议将不胜感激！

或者可以帮助我如何为jQuery Validate Plugin添加/或创建另一个规则以供其验证。

    <script>
     $("#form").validate({
         focusInvalid: false,
    rules: {
        ownership: {
            required: true
        },
        vin: {
            required: true,
            validateVin: true
        },
        purchasedDatePicker: {
            required: true,
            validatePurchaseDate: true
        },

        // Same for other fields
    },
    messages: {
        ownership: "This field is required.",
        vin: "This field is required.",
        purchasedDatePicker: "This field is required.",
        // Repeat for other fields
    }
});

// create your custom rule
jQuery.validator.addMethod("validateVin", function(vin) {
  var date = Number($("#vehicleyear").val());
  var re;
    if(date <= 0) {
        re = new RegExp("^[A-HJ-NPR-Za-hj-npr-z\\d]{8}[\\dX][A-HJ-NPR-Za-hj-npr-z\\d]{2}\\d{6}$");
    } else if (date >= 1981) {
        re = new RegExp("^[A-HJ-NPR-Za-hj-npr-z\\d]{8}[\\dX][A-HJ-NPR-Za-hj-npr-z\\d]{2}\\d{6}$");
    } else if (date < 1981) {
        re = new RegExp("^[A-Za-z\\d]{2,17}$");
    }
  return vin.match(re);
}, 'Please enter valid VIN.');


// create your custom rule
jQuery.validator.addMethod("validatePurchaseDate", function(purchasedDatePicker) {
  var date = ($("#purchasedDatePicker").val());
  var re;
    if (date) !== '') {
        re = new RegExp("/^(0[1-9]|1[0-2])\/(19|20)\d{2}$/");
    }
  return purchasedDatePicker.match(re);
}, 'Please enter valid Purchase Date.');
</script>

Answer 1

您没有正确使用正则表达式。您需要对要验证的字符串使用.test()方法：

if (date_regex.test(dateString)) {

<强>更新

这是一个更完整的建议，包括清理事件绑定：

$(document).ready(function() {
    $("#purchasedDatePicker").on('change', function() {
        var dateString = $(this).val();
        var date_regex = /^(0[1-9]|1[0-2])\/(19|20)\d{2}$/;
        if (date_regex.test(dateString)) {
            // do something for a valid value
        }
        else {
            // do something for an invalid value
        }
    });

    $("#purchasedDatePicker").datepicker({maxDate: new Date()});
});

注意：我已添加到$(document).ready(. . .部分，以防您在代码中未包含该内容。您必须包含它，以便在页面加载后进行绑定。

另外，我假设您的Datepicker已配置为elswhere以MM/YYYY格式输出日期（根据您的正则表达式）？否则，你总是会得到无效的日期。

Answer 2

您的代码：

if (dateString == date_regex) {
    $('#purchasedDatePicker').valid();
}

你的目的是.valid()完全倒退。

您无法通过调用.valid()将该字段“设置”为有效。

您只应致电.valid()进行验证测试。

.valid()触发对附加字段的测试，根据字段值评估您使用jQuery Validate插件声明的规则，并返回布尔值true或false 。它不会“设置”或将字段声明为任何内容。

jqueryvalidation.org/valid/

如果您需要编写自己独立的验证功能，则应使用the built-in .addMethod() method。这样它就完全融入了插件的运作方式。

通用示例......

jQuery.validator.addMethod("yourMethod", function(value, element, params) {
    // your function
    // -----------------------
    // 'value' represents the data in the field
    // 'element' represents the field itself
    // 'params' represents an array of optional parameters
    // -----------------------
    // return true to say it's valid
    // return false to say it's invalid and show message
}, "Please enter the correct value");

$('#myform').validate({
    rules: {
        myField: {
            required: true,
            yourMethod: true // <- declare the custom rule
        }
    }
});

您新编辑的代码......

jQuery.validator.addMethod("validatePurchaseDate", function(purchasedDatePicker) {
  var date = ($("#purchasedDatePicker").val());
  var re;
    if (date) !== '') {
        re = new RegExp("/^(0[1-9]|1[0-2])\/(19|20)\d{2}$/");
    }
  return purchasedDatePicker.match(re);
}, 'Please enter valid Purchase Date.');

无需将value参数更改为purchasedDatePicker ...它仍然只代表字段的“值”。无论你怎么称呼它，它代表开发人员定义它代表的东西。

此外，$("#purchasedDatePicker").val()已由value参数表示......这是value的重点。

然后，当您使用value参数时，可以将规则应用于任何字段，而您的函数仅将规则限制为一个特定字段。

看起来应该更像......

jQuery.validator.addMethod("validatePurchaseDate", function(value, element) {
    return this.optional(element) || value.match(/^(0[1-9]|1[0-2])\/(19|20)\d{2}$/);
}, 'Please enter valid Purchase Date.');

或者这......

jQuery.validator.addMethod("validatePurchaseDate", function(value, element) {
    return this.optional(element) || /^(0[1-9]|1[0-2])\/(19|20)\d{2}$/.test(value);
}, 'Please enter valid Purchase Date.');

我将标准this.optional(element)与“或”一起使用，因为在您可能未使用required规则的情况下，它会使自定义规则为“可选”。换句话说，即使您未将this.optional(element) ||规则设置为required，省略required也会将该字段命名为true。

Browsing through the source code of the the plugin's additional-methods.js file should give you lots of ideas about how you can use use regular expressions to construct custom methods

Answer 3

我认为你需要改变

if (dateString == date_regex) {
  $('#purchasedDatePicker').valid();
}

到：

if (date_regex.test(dateString)) {
    $('#purchasedDatePicker').valid();
} else {
    //do something when invalid
}

日期regEx允许输入框验证

3 个答案: