在 Javascript 中检查表单验证的简单按钮答案

【问题标题】：Simple button to check form validation in Javascript在 Javascript 中检查表单验证的简单按钮
【发布时间】：2014-04-04 16:36:04
【问题描述】：

我只是想创建一个简单的按钮来检查输入字段是否为空并相应地设置样式。我觉得这应该很简单，但我只是错过了一些东西。

<input id="text"></input>
<button id="button">check</button>
<script>
var text = document.getElementById('text');
var button = document.getElementById('button');

function checker() {
   if (text.value === "") {
    text.style.cssText = "background:red;";
    return false;
   }
   else {
       text.style.cssText = "background:green;";
   }
}

button.addEventListener("click", checker(), false);
</script>

这是我用来尝试让它工作的 jsfiddle 的链接。

Link

【问题讨论】：

你为什么不用jquery？它更简单，您可以在表单api.jquery.com/submit 上使用 .submit 函数
好吧，我刚开始学习 javascript，我想我会先学习它，至少在我尝试学习 jquery 之类的其他东西之前先掌握基础知识。

标签： javascript html css forms

【解决方案1】：

您实际上是在调用函数并传递结果，而不是传递对 checker() 函数的引用。

你想要做的是像这样传递对函数的引用......

button.addEventListener("click", checker, false);

注意缺少()

【讨论】：

感谢您的帮助和如此快速的响应！
没问题 - 当你知道你在找什么时很容易发现。祝您在 javascript/jquery 之旅中好运 :-)

【解决方案2】：

需要通过引用传递函数：

button.addEventListener("click", checker, false);

注意：你也可以传递一个匿名函数：

button.addEventListener("click", function(){checker();}, false);

【讨论】：