jQuery 验证 - 在 Safari 中不验证日期，但在 Chrome 中验证答案

【问题标题】：jQuery validation - Date not validation in Safari but in Chrome it doesjQuery 验证 - 在 Safari 中不验证日期，但在 Chrome 中验证
【发布时间】：2019-07-20 16:00:55
【问题描述】：

问题：jQuery 验证在 Safari 上不起作用，但在 Google chrome、firefox 上起作用。

处理表单注册的 CMS 需要以下格式的日期：YYYY-MM-DD。人们习惯于填写表格是这样的：DD-MM-YYYY。所以我为了管理我使用了 jQuery (https://jqueryui.com/datepicker/)。我使用 dateFormat 设置了正确的日期，并使用 altFormat 来更改日期的外观。提交表单时，验证器方法：minAge16 应检查用户是否年满 16 岁。当我在 Google Chrome 或 Firefix 上测试它时，它工作正常并返回错误消息；您未满 16 岁。但是当我在 Safari 浏览器或 iPhone 上测试它时，它一直说你不是 16 岁或以上。我猜它不起作用，因为 safari 使用不同的时间格式。有其他人在 Safari 或 Chrome 中遇到过验证问题吗？您是如何设法解决的？

jQuery 日期选择器：

$(document).ready(function() {
   $( ".js-date-picker" ).datepicker({
      dateFormat: "yy-mm-dd",
      altFormat: "dd-mm-yy"
   });
});

形式：

<form action="" method="post" class="text-center py-4 js-validate" id="signup">
<div class="row">
    <div class="col-12 mb-2">
        <label class="input">
            <input type="text"
                   name="data[invoice][birthdate]"
                   placeholder="Date of birth*"
                   class="input__field js-date-picker mt-2" required value="">
        </label>
    </div>
</div>
<button type="submit" name="button" class="d-block mx-auto button mt-4 mt-lg-5">Submit</button>

Javascript：

$(document).ready(function() {
    // Check if browser supports date input
    var datePickerFormatMessage = '';
    var inputField = document.createElement('input');
    inputField.setAttribute('type', 'date');
    if(inputField.type != 'date') {
        datePickerFormatMessage = ' (JJJJ-MM-DD)';
    }

    // Check if the user entered a valid date
    $.validator.addMethod('validDate', function(value, element) {
        var regEx = /^\d{4}-\d{2}-\d{2}$/;
        if(!value.match(regEx)) {
            return false;  // Invalid format
        }

        var today = new Date();
        var date = new Date(value);
        if(Number.isNaN(date.getTime())) {
            return false; // Invalid date
        } else if ((today.getFullYear() - date.getFullYear()) > 110) {
            return false; // Invalid age
        }

        return date.toISOString().slice(0, 10) === value;
    }, ('Please enter a valid date' + datePickerFormatMessage));

    $.validator.addMethod('minAge16', function(value, element) {
        var birthDate = new Date(value);
        var eighteenYearsAgo = new Date();
        eighteenYearsAgo.setFullYear(eighteenYearsAgo.getFullYear() - 16);

        return (birthDate < eighteenYearsAgo);
    }, 'You must be atleast 16 years or older.');

    $('.js-validate').each(function() {
        $(this).validate({
            rules: {
                'data[invoice][birthdate]': {
                    validDate: true,
                    minAge16: true
                }

            },
            messages: {
                'data[buyer][birthdate]': {
                    date: 'Fill in a valid date' + datePickerFormatMessage
                }
            },

        });
    });
});

这里出错了：

$.validator.addMethod('minAge16', function(value, element) {
    // here it goes wrong when i debug in safari, i am not getting a correct date back to check the difference
    var birthDate = new Date(value);
    var eighteenYearsAgo = new Date();
    eighteenYearsAgo.setFullYear(eighteenYearsAgo.getFullYear() - 16);

    return (birthDate < eighteenYearsAgo);
}, 'You must be atleast 16 years or older.');

【问题讨论】：

好吧，我在 Mac High Sierra 上使用真正的 Safari 12，你的代码对我来说运行良好：jsfiddle.net/v9g3t40h 你在哪里/如何在 Safari 中测试它？您实际上是在 Mac 上使用真正的 Safari，还是使用模拟器/模拟器？如果是真正的 Safari，是什么版本？
在运行最新 iOS 的 iPhone Xs 上也能在 Safari 中完美运行。
@Sparky 在 JsFiddle 你没有使用带有 dateFormat 和 altFormat 选项的 jQuery datepicker 插件。这就是它起作用的原因。
@Sparky 我使用的是 safari 版本 12.1.1，没有模拟器。
那么从逻辑上讲，尽管您有这样的暗示，但这不是验证问题，而是日期选择器如何处理格式的问题。既然最新版本的 jQuery UI 应该可以在 Safari 中正常工作，那么现在我必须问你，你使用的是什么版本的 jQuery UI？由于验证在获得正确输入时显然可以按预期工作，因此我将仅将精力集中在日期选择器上。

标签： javascript jquery validation datetime

【解决方案1】：

找到解决方案： Safari 不接受：

new Date('01-10-2000');

所以我做的是：

var birthDate = new Date('01-10-2000'.replace(/-/g, "/"));

之后我使用 UTCString();

确保所有日期的格式正确

birthDate.toUTCString();

这篇文章帮助我找到了解决方案： Invalid date in safari

【讨论】：