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是现有函数。

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

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

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

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