Onblur在从外部js文件访问功能时不起作用

当我尝试在外部 JavaScript 文件中使用函数而onclick属性工作时，onblur 属性不适用于 html 页面上的表单验证。因此，只有JS文件中的结果函数可以正常工作。请帮助我知道为什么。下面是我的 html 和 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>

然后是JS文件：

function name(){
var response = document.getElementById("name").value;
if(response.length == 0){
document.getElementById("msg1").style.color = "Red";
document.getElementById("msg1").innerHTML = " You did not provide name";
}
else{
document.getElementById("msg1").style.color = "Green";
document.getElementById("msg1").innerHTML = "<strong> Valid</strong>";
}
}
function phone(){
var response = document.getElementById("phone").value;
var pattern = /^d{3}-d{3}-d{4}$/;
if(pattern.test(response)){
document.getElementById("msg2").style.color = "Red";
document.getElementById("msg2").innerHTML = " Provide number in xxx-xxx-xxxx format";
}
else{
document.getElementById("msg2").style.color = "Green";
document.getElementById("msg2").innerHTML = "<strong> Valid</strong>";
}
}
function id(){
var response = document.getElementById("id").value;
if(response.length == 0){
document.getElementById("msg3").style.color = "Red";
document.getElementById("msg3").innerHTML = " You did not provide a seven-digit id";
}
else{
document.getElementById("msg3").style.color = "Green";
document.getElementById("msg3").innerHTML = "<strong> Valid</strong>";
}
}
function email(){
var emailInput = document.getElementById("email").value;
var emailPattern = /^[^s@]+@[^s@]+.[^s@]+$/;
if (emailPattern.test(emailInput)){
document.getElementById("msg4").style.color = "Green";
document.getElementById("msg4").innerHTML = "<strong> Valid</strong>";
return (true);
}
else{
document.getElementById("msg4").style.color = "Red";
document.getElementById("msg4").innerHTML = " Invalid Email";
return (false);
}
}
function room(){
var response = document.getElementById("room").value;
var pattern = /^d{3}-s{1}$/;
if(patttern.test(response)){
document.getElementById("msg5").style.color = "Red";
document.getElementById("msg5").innerHTML = " You did not provide accurate room information";
return(true);
}
else{
document.getElementById("msg5").style.color = "Green";
document.getElementById("msg5").innerHTML = "<strong> Valid</strong>";
return(false);
}
}
function result(){
document.getElementById("end").innerHTML = "<center>Your request has been recorded. Please stay patient as the maintenance team prepares to work on it. Thanks.</center>";
}

有几个很好的理由不使用onxyz属性样式的事件处理程序。众多充分的理由之一是，它们在一个比全球环境更拥挤的环境中运行标识符——这说明了一些事情。代码的运行就像在几个with块中一样，包括出现onxyz属性的元素的所有属性、其形式和文档(当然还有全局变量(。由这些(有效(with块添加到作用域的标识符的优先级高于全局函数。

例如，在该环境中，name和id标识符将解析为元素的name和id属性，而不是全局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-*属性关联它们。
将script放在页面末尾，以便在运行时元素存在(这对于 Step&nbsp2 很重要(。

例如，您的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

(如果您需要支持没有addEventListener的旧IE，请使用这样的解决方法。

例：

(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

<div>Focus the field below, then unfocus it.</div>
<input data-validate="phone" type="text" id="phone" placeholder="xxx-xxx-xxxx">

或者，当然，使用已经彻底设计和调试的众多精细表单验证库之一。

相关内容

最新更新

热门标签：