Question

当我尝试在NAME属性工作时在外部javascript文件中使用函数时，onblur属性不适用于html页面上的表单验证。因此，只有JS文件中的结果函数才有效。请帮我知道原因。下面是我的html和js文件。 HTML文件：

onclick

然后是JS文件：

    <!DOCTYPE html>
    <html>
    <head>
        <title>Maintenance request</title>
        <script type="text/javascript" src="MaintainScript.js></script>
        <link rel="stylesheet" type="text/css" href="maintainStyle.css">    
    </head>
    <body>
        <div id="banner"><h1 style="color:#FFFFFF;">Housing Maintenance Request</h1></div>
        <form>
        <table>
        <tr>
         <td>Name:</td><td><input type="text" id="name" onblur="name();"><span id="msg1"><span></td>
        </tr>
        <tr>
        <td>Phone:</td><td><input onblur="phone();" type="text" id="phone" placeholder="xxx-xxx-xxxx"><span id="msg2"><span></td>
        </tr>
        <tr>
        <td>Student ID:</td><td><input onblur="id();" type="number" id="Student ID"><span id="msg3"><span></td>
        </tr>
        <tr>
        <td>Email:</td><td><input onblur="email();" type="text" id="Email" placeholder="email@mail.com"><span id="msg4"><span></td>
        </tr>
        <tr>
        <td>Type of request:</td>
        <td><select>
            <option>A/C</option>
            <option>Door Lock</option>
            <option>Mirror</option>
            <option>Shower</option>
            <option>Light out</option>
            <option>Room change</option>
            <option>Pest issue</option>
            <option>Mold</option>
        </select></td>
        </tr>
        <tr>
        <td>Room/Apt/Suite:</td><td><input onblur="room();" type="text" id="room"><span id="msg3"></span></td>
        </tr>
        </table>
        <div class="comments"><center>Describe the problem</center><br><textarea cols=145 rows=7></textarea></div>
        <div class="submit"><input type="button" onclick="result();" value="SUBMIT"></div>
        <span id="end"></span>  
    </form>
</body>

Answer 1

使用onxyz - 属性样式事件处理程序有几个很好的理由。其中一个很好的理由是，它们运行的环境比标识符更加拥挤，而不是全球环境 - 这就是说法。代码运行就好像它在几个with块中一样，包括onxyz - 属性出现在其上的元素的所有属性，它的形式和文档（当然还有全局变量）。这些（有效）with块添加到范围的标识符的优先级高于全局函数。

例如，在该环境中，name和id标识符将解析为元素的name和id属性，而不是全局{{1} }和name函数。你可以在这里向自己证明：

id

相反：

将所有代码放在作用域函数中，这样就不会创建一堆全局函数。
使用现代事件处理来处理您的处理程序，可能会按名称或<script> // (This is here rather than in the script pane // because Stack Snippets correctly put the script // *after* the HTML; want to match OP's question) function name() { } function id() { } </script> <div>Focus the field below, then unfocus it:</div> <input type="text" id="foo" onblur="console.log('name = [' + name + '], id = [' + id + ']');">属性进行关联。
将data-*放在页面末尾，以便元素在运行时出现（这对Step＆amp; nbsp2很重要）。

例如，您的script字段可能如下所示：

phone

，您的脚本可能如下所示：

<input data-validate="phone" type="text" id="phone" placeholder="xxx-xxx-xxxx">

（如果您需要支持没有(function() { // The beginning of the scoping function var validators = { phone: function phone() { // .... } // ...and the others... }; Array.prototype.forEach.call(document.querySelectorAll("input[data-validate]"), function(element) { var vname = element.getAttribute("data-validate"); var validator = validators[vname]; if (validator) { element.addEventListener("blur", validator, false); } else if (typeof console !== "undefined" && console.error) { console.error("Unknown data-validate value '" + vname + "'", element); } }); })(); // The end of the scoping function的旧IE，请使用workarounds like this。）

示例：

addEventListener

(function() { // The beginning of the scoping function
    var validators = {
        phone: function phone() {
            console.log("Phone validation triggered");
        }
        // ...and the others...
    };

    Array.prototype.forEach.call(document.querySelectorAll("input[data-validate]"), function(element) {
        var vname = element.getAttribute("data-validate");
        var validator = validators[vname];
        if (validator) {
            element.addEventListener("blur", validator, false);
        } else if (typeof console !== "undefined" && console.error) {
            console.error("Unknown data-validate value '" + vname + "'", element);
        }
    });
})();         // The end of the scoping function

或，当然，使用其中一个已经完全设计和调试的精细表单验证库。

从外部js文件访问函数时Onblur无法正常工作

1 个答案: