Question

我在文件中有一些意大利面条代码。文件本身包含出生日期（DOB）的输入字段。

该脚本在Chrome和IE11上运行良好，但它不适用于 Firefox 。

有一个错误需要将第二个参数传递给parseInt()，但是我失去了选项验证日期。因此，我需要帮助才能干净地解析数字并将它们组合成日期字符串。

我调试了一下，发现在FF中没有控制台日志，但显然应该这样做。基本上，似乎FF卡在某处，但我不知道在哪里以及为什么。

此脚本的目的是验证输入的值是INT还是组合验证客户的年龄（基本上我想检查他是否是18岁 - 基于3个输入，日，月，年）。

<script type="text/javascript">
//<![CDATA[
    var customer_dob = new Varien.DOB('.customer-dob', <?php echo $this->isRequired() ? 'true' : 'false' ?>, '<?php echo $this->getDateFormat() ?>');
    jQuery(document).ready(function($){ 
        var sPath = window.location.pathname;

        // OPTION 1: /customer/account/create/
        // OPTION 2: /onestepcheckout/
        // OPTION 3: /customer/account/edit/

        console.log(sPath);

        var age = [];

        if(sPath == "/onestepcheckout/"){
            var disButID = "#onestepcheckout-place-order";
        } else if (sPath == "/customer/account/create/") {
            var disButID = ".buttons-set button.button";
        } else if (sPath == "/customer/account/edit/") {
            var disButID = ".buttons-set button.button";
        }

        //console.log(disButID);

        //jQuery(disButID).prop("disabled", true);

        jQuery(".customer-dob input").each(function($){
            var entity = jQuery(this).attr("name");
            //console.log(entity);
            if(entity == "day" || entity == "month" || entity == "year"){
                var selector = jQuery(this).attr("data-selector");
                age[selector] = jQuery(this).val();
                getAge(age);
                //console.log("Change check: " + age);
            } else if (entity == "dob") {
                // ... 
            }
        });

        jQuery(".customer-dob input").change(function($){
            var selector = jQuery(this).attr("data-selector");
            age[selector] = jQuery(this).val();
            getAge(age);
            //console.log("Change check: " + age);
        });

        function getAge(age) {
            if(age["d"] && age["m"] && age["y"]){
                var day = age["d"];
                var month = age["m"];
                var year = age["y"];
                console.log("Date: " + day, month, year);

                unlockOrderButton(day, month, year);

            } else {
                // ... 
                //console.log(age.length);
            }
        }

        function unlockOrderButton(day, month, year){

            var dateString = parseInt(month) + "-" + parseInt(day) + "-" + parseInt(year);
            var today = new Date();
            var birthDate = new Date(dateString);
            var currentAge = today.getFullYear() - birthDate.getFullYear();
            var m = today.getMonth() - birthDate.getMonth();

            if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
                currentAge--;
            } else {
                currentAge;
            }


            //var age = parseInt(curr);

            console.log(parseInt(currentAge));
            console.log("Unlock Button - Check");
            if(currentAge >= 18){
                jQuery(".customer-dob-error").removeClass("active");
                jQuery(disButID).prop("disabled", false);
                console.log("Unlock Button - Success. Age is: " + currentAge);
            } else {
                jQuery(".customer-dob-error").addClass("active");
                jQuery(disButID).prop("disabled", true);
                console.debug("Unlock Button - Fail. Age is: " + currentAge);
            }
        }
    });
    //]]>
</script>

HTML代码：

<div class="input-box customer-dob">
    <div class="dob-day">
             <input type="text" data-selector="d" id="billing:day" name="billing[day]" value="" title="Tag" class="input-text validate-custom">
             <label for="billing:day">TT</label>
         </div><div class="dob-month">
             <input type="text" data-selector="m" id="billing:month" name="billing[month]" value="" title="Monat" class="input-text validate-custom">
             <label for="billing:month">MM</label>
         </div><div class="dob-year">
             <input type="text" data-selector="y" id="billing:year" name="billing[year]" value="" title="Jahr" class="input-text validate-custom" autocomplete="off">
             <label for="billing:year">JJJJ</label>
         </div>    
    <div class="dob-full" style="display:none;">
        <input type="hidden" id="billing:dob" name="billing[dob]">
    </div>

    <div class="validation-advice" style="display:none;"></div>
</div>

Firebug无法显示控制台的内容，因此我检查了内置控制台。

Date: 17 02 1950  onestepcheckout:1073:5
Unlock Button - Check  onestepcheckout:1096:4
Unlock Button - Fail. Age is: NaN  onestepcheckout:1104:5

Answer 1

问题是您将日期字符串格式化为MM-DD-YYYY。什么时候使用日期字符串， Date.parse 期望RFC2822格式化日期。浏览器通常会识别其他格式，但对它们的支持则不然统一或一致。 Chrome识别MM-DD-YYYY，但Firefox不识别。走到Firefox中的控制台并键入new Date('01-01-2017')，它将返回 Invalid Date。在无效的日期对象上调用.getFullYear()返回 NaN 从当前年份减去NaN会返回NaN。所以，这就是原因当您的代码在Firefox中运行时，currentAge为NaN。

从ES5开始，JavaScript正式supports the ISO-8601 format 对于日期字符串，因此如果您将日期字符串切换为YYYY-MM-DD，它应该适用于所有浏览器。

var dateString = parseInt(year, 10) + "-" + parseInt(month, 10) + "-" + parseInt(day, 10);

Firefox似乎错误地解析了int值 - 我的脚本出了什么问题？

1 个答案: