以下是我想向您介绍的示例代码。 此处的目的不是为您提供快速解决方案，而是向您展示一些下划线模式和实践供您考虑。
回答您的问题（或解决您的问题 - 关于按钮输入）需要它更强大/更复杂...我相信它会提出问题，并且（再次）它不是故意的为您提供快速解决方案。
这段代码演示了如何使用 JSON（Javascript 对象表示法）来构造两个对象：
一个使用策略模式并与您的表单控件耦合。请注意，它使用 querySelectorAll，而不是 getElementById。
另一个是抽象的 json 框架，由您将绑定到事件侦听器的函数委托处理程序组成：以解耦方式。你会注意到在我们放在一起的 JSON 实例的 init 函数中，这些函数是被分配的..
实例 JSON 的 Run 方法，调用 validate 方法，然后是 execute 方法。它不（不能）解释。
示例代码（混合 - HTML 和内联 Javascript）
<html>
<head>
<script type="text/Javascript">
var controlHandlers = {
"OnExecuteFirstTask" : function(args) {
args = args || {"a":"", "b":"", "uri":""};
args.a = args.a || "";
args.b = args.b || "";
args.uri = args.uri || (args.a.length > 0 && args.b.length > 0) ? args.a + "+" + args.b : "";
console.log("Executing... [OnExecuteFirstTask] - EventArgs: %o", args);
window.open('http://internal.website.com/' + args.uri, 'awindow');
},
"OnExecuteSecondTask" : function(args) {
args = args || {"a":"", "b":"", "uri":""};
args.a = args.a || "";
args.b = args.b || "";
args.uri = args.uri || (args.a.length > 0 && args.b.length > 0) ? args.a + "+" + args.b : "";
console.log("Executing... [OnExecuteSecondTask] - EventArgs: %o", args);
window.open('http://internal.website.com/' + args.uri, 'awindow');
},
"OnValidateTask" : function(arr) {
console.log("Validating... [OnValidateTask]");
if (!(arr)) {return false;}
if (!(arr.length > 0)) { return false;}
var isValid = true;
for (var i = 0; i < arr.length; i++)
{
if (!(typeof(arr[i]["IsValid"]) == "function")) {
console.log("NullException: %o - 'IsValid' Method doesn't exist", arr[i]);
return false;
}
if (arr[i].IsValid())
{
arr[i].ctrl.className = "valid";
isValid = true && isValid;
} else {
arr[i].ctrl.className = "invalid";
isValid = false;
}
}
return isValid;
},
"OnTextBoxFocus" : function(ev) {
ev = ev || {"target" : null};
target = ev.target || {"className" : ""};
target.className = "focus";
}
};
var formControl = {
"Task" : {
"First" : {
"Run" : function(ev) {
var task = formControl.Task.First;
task.Validate = task.Validate || function (ev) {return false;};
if (task.Validate(formControl.elms))
{
task.Execute({"a": formControl.FirstNameTextBox.value, "b": formControl.LastNameTextBox.value});
}
},
"Execute" : null,
"Validate" : null
},
"Second" : {
"Run" : function(ev) {
var task = formControl.Task.Second;
task.Validate = task.Validate || function (ev) {return false;};
if (task.Validate(formControl.elms))
{
task.Execute({"a": formControl.FirstNameTextBox.value, "b": formControl.LastNameTextBox.value});
}
},
"Execute" : null,
"Validate" : null
}
},
"elms" : [],
"FirstTaskButton" : null,
"SecondTaskButton" : null,
"FirstNameTextBox" : null,
"LastNameTextBox" : null,
"init" : function() {
formControl.FirstTaskButton = document.querySelectorAll("input#btnFirstTask")[0];
formControl.SecondTaskButton = document.querySelectorAll("input#btnSecondTask")[0];
formControl.FirstNameTextBox = document.querySelectorAll("input#tbFirst")[0];
formControl.LastNameTextBox = document.querySelectorAll("input#tbLast")[0];
formControl.Task.First.Validate = controlHandlers.OnValidateTask;
formControl.Task.First.Execute = controlHandlers.OnExecuteFirstTask;
formControl.Task.Second.Validate = controlHandlers.OnValidateTask;
formControl.Task.Second.Execute = controlHandlers.OnExecuteSecondTask;
formControl.FirstTaskButton.addEventListener("click", formControl.Task.First.Run);
formControl.SecondTaskButton.addEventListener("click", formControl.Task.Second.Run);
formControl.FirstNameTextBox.addEventListener("focus", controlHandlers.OnTextBoxFocus);
formControl.LastNameTextBox.addEventListener("focus", controlHandlers.OnTextBoxFocus);
formControl.elms.push( { "ctrl" : formControl.FirstNameTextBox, "IsValid" : function () { return formControl.FirstNameTextBox.value.length > 0;}});
formControl.elms.push( { "ctrl" : formControl.LastNameTextBox, "IsValid" : function () { return formControl.LastNameTextBox.value.length > 0;}});
}
};
</script>
<style>
input[type="text"].valid {background-color:green;color:white;font-weight:700;text-shadow:0em 0em 0.1em black;}
input[type="text"].invalid {background-color:red;color:white;font-weight:700;text-shadow:0em 0em 0.1em black;}
.invalid::-webkit-input-placeholder {
color: white;
font-weight:700;
text-shadow:0em 0em 0.1em black;
}
.invalid:-moz-placeholder {
/* FF 4-18 */
color: white;
font-weight:700;
text-shadow:0em 0em 0.1em black;
}
.invalid::-moz-placeholder {
/* FF 19+ */
color: white;
font-weight:700;
text-shadow:0em 0em 0.1em black;
}
.invalid:-ms-input-placeholder {
/* IE 10+ */
color: white;
font-weight:700;
text-shadow:0em 0em 0.1em black;
}
</style>
</head>
<body>
<div id="msgBox" style="display:none;">Invalid Entry</div>
<form id="mainForm" name="mainForm">
<div>
<label for="tbFirst">First Name:</label>
<input type="text" id="tbFirst" name="first" placeholder="First" value="" />
</div>
<div>
<label for="tbLast">Last Name:</label>
<input type="text" id="tbLast" name="last" placeholder="Last" value="" />
</div>
<div>
<input type="button" id="btnFirstTask" value="First Task" />
<input type="button" id="btnSecondTask" value="Second Task" />
</div>
</form>
<script>
formControl.init();
</script>
</body>
</html>
这就是策略。在 formControl.Task.First.Execute 启动后的某个时间点分配一个新函数（formControl.init）意味着它将在验证后执行该函数..
当然，分配给Task.First.Execute 的新方法将接收'argument' 参数{"a": firstname, "b": lastname}.. 这可能有用也可能没用，对吧？
所以，一个更强大的论点可能会变得更可取..
反过来，您可以通过使用 formControls.elms 数组来修改/扩展您的“验证包”（它可能需要一个比我给它的名称更合适的名称）..