Date.style 未定义但不明白为什么

Question

这里是 JavaScript 菜鸟，试图理解为什么下面代码中的第一个验证不起作用。我知道Date.style 是未定义的，但这只是我在其他字段中使用的代码的一个副本，并且除了validationDate(ymd) 之外的所有字段都可以正常工作。

function validateDate(ymd) {
    var ymd = document.getElementById('Date').value;
    var legalEntry = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;

    if (ymd.length == 0) {
        Date.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The date can\'t be empty";
        return false;
    } else if (!legalEntry.test(ymd)) {
        Date.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The date must be in format YYYY-MM-DD";
        return false;
    } else {
        Date.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
    }
}

    <tr><td>Date (YYYY-MM-DD)*</td>
    <td><input type="text" onblur="validateDate()" name="Date" id="Date" size="10" maxlength="10"/></td>

谢谢

这里要求的是适用于其他领域的完整代码：

function validateForm() {
    return (validateRunnerId
        && validateEventId
        && validateDate
        && validateTime
        && validatePosition
        && validateCategoryId
        && validateAge
        && validatePB);
}


function validateRunnerId(ID) {
    var ID = document.getElementById('RunnerId').value;
    var legalEntry = /^\d{1,5}?$/;

    if (ID.length == 0) {
        RunnerId.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The RunnerId can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(ID)) {
        RunnerId.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The RunnerId must be a number from 1 to 99999";
        return false;
        }

    else {
        RunnerId.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validateEventId(ID) {
    var ID = document.getElementById('EventId').value;
    var legalEntry = /^\d{1,5}?$/;

    if (ID.length == 0) {
        EventId.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The EventId can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(ID)) {
        EventId.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The EventId must be a number from 1 to 99999";
        return false;
        }

    else {
        EventId.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validateDate(date) {
    var date = document.getElementById('Date').value;
    var legalEntry = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;

    if (date.length == 0) {
        Date.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The date can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(date)) {
        Date.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The date must be in format YYYY-MM-DD";
        return false;
        }

    else {
        Date.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validateTime(time) {
    var time = document.getElementById('Time').value;
    var legalEntry = /^(?:(?:([01]?\d|2[0-3]):)?([0-5]?\d):)?([0-5]?\d)$;/

    if (time.length == 0) {
        Time.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The finish time can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(time)) {
        Time.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The finish time must be in format HH:MM:SS";
        return false;
        }

    else {
        Time.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validatePosition(position) {
    var position = document.getElementById('Position').value;
    var legalEntry = /^\d{1,5}?$/

    if (position.length == 0) {
        Position.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The position can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(position)) {
        Position.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The position must be a number from 1 to 99999";
        return false;
        }

    else {
        Position.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validateCategoryId(ID) {
    var ID = document.getElementById('CategoryId').value;
    var legalEntry = /^\d\d?[0]?$/;

    if (ID.length == 0) {
        CategoryId.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The CategoryId can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(ID)) {
        CategoryId.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The CategoryId must be a number from 1 to 100";
        return false;
        }

    else {
        RunnerId.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validateAge(age) {
    var age = document.getElementById('Age').value;
    var legalEntry = /^\d\d?\,?\d?\d?$/;

    if (age.length == 0) {
        Age.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The age grade can\'t be empty";
        return false;
    }

    else if (!legalEntry.test(age)) {
        Age.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The age grade must be decimal number of maximum 2 integers and 2 decimals";
        return false;
        }

    else {
        Age.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

function validatePB(pb) {
    var pb = document.getElementById('PB').value;
    var legalEntry = /^(0|1)$/;

    if (pb.length == 0) {
        pb.value = "0";
    }

    else if (!legalEntry.test(pb)) {
        PB.style.background = 'Orange'; 
        error.style.color = 'red';
        document.getElementById('error').innerHTML = "The PB can only be 0 for false and 1 for true";
        return false;
        }

    else {
        PB.style.background = 'White';
        document.getElementById('error').innerHTML = "";
        return true;
        }
}

Answer 1

您的代码依赖于浏览器中元素 ID 映射到变量的旧的非标准机制。例如：

<div id="foo"></div>
<script>
    foo.innerHTML = 'Hi!';
</script>

您面临的问题是内部逻辑看起来像这样：

<div id="foo">
    <script INTERNAL>
        if (window.foo == undefined) {
            window.foo = document.getElementById('foo');
        }
    </script>
</div>
<script>
    foo.innerHTML = 'Hi!';
</script>

该变量仅在它不存在时才被分配。您的 Date 变量永远不会被写入，因为 window.Date 是一个现有函数。

您可以在这个 fiddle 中看到这一点：http://jsfiddle.net/8fjkc/2/ 如果我有元素，一个名为 Date，一个与用户定义的变量同名，一个具有未使用的名称，只有一个未使用的名称被映射到一个变量。

最简单的解决方案是将“日期”元素重命名为“日期字段”之类的其他名称，但您已经看到这非常脆弱。您最好的解决方案是使用document.getElementById 定义一个变量。您甚至可以在函数范围内将其定义为 Date 而不会破坏任何外部内容：

function validateDate(date) {
    var Date = document.getElementById('Date');
    ...
}

var foobar = new Date(); // <-- still works.