javascript - 日期正则表达式允许输入框验证

Question

我试图弄清楚如何将此正则表达式应用于日期，一旦正则表达式与输入值匹配，它就会表示输入有效。

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 验证插件添加/或创建另一个规则以进行验证提供一些帮助。

    <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)) {

更新:

这是一个更完整的建议，包括清理事件绑定(bind):

$(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(... 部分中添加了这一点，以防万一您没有将其包含在代码中。您必须包含该内容，以便在页面加载后进行绑定(bind)。

另外，我假设您的日期选择器已在其他地方配置为以 MM/YYYY 格式输出日期(根据您的正则表达式)？否则，您总是会得到无效日期。