JavaScript表单验证：理解函数调用
JavaScript表单验证：理解函数调用
我是JavaScript的新手，在表单验证方面还在摸索中。我一直在阅读书籍和在线教程，我在网上找到了下面的代码，我认为这段代码非常优雅和易维护。不幸的是，我的JavaScript技能还不足以理解其中的每一部分。我在这里寻求帮助，希望能够理解这些不同的函数。\n我还想在一个事件（onSubmit事件）上调用InstantValidation函数，将其放在一个独立的.js文件中（基于事件监听器），所以请您帮助我适当地调用这个函数。\n以下是代码：\n
\n特别是下面的代码对我来说不太清晰：\n
function addEvent(node, type, callback)
{
if(node.addEventListener)
{
node.addEventListener(type, function(e)
{
callback(e, e.target);
}, false);
}
else if(node.attachEvent)
{
node.attachEvent('on' + type, function(e)
{
callback(e, e.srcElement);
});
}
}
\n对此的任何帮助（即使是非常简短的解释）将不胜感激！
问题出现的原因是不同浏览器对于DOM元素的事件绑定函数实现方式不同，因此需要根据浏览器支持情况来选择使用哪种方式进行事件绑定。
解决方法是使用条件语句进行判断，如果浏览器支持addEventListener函数，则使用该函数进行事件绑定；否则，使用attachEvent函数进行事件绑定。这样可以保证在不同浏览器下都能正确地绑定事件。
以下是整理后的
这是一个跨浏览器的代码，用于将事件处理程序附加到DOM元素引发的事件上。该函数（addEvent）的参数如下：
node：要附加事件的DOM节点对象（可以通过getElementById等函数获取）
type：事件名称，如change，focus等
callback：事件触发时要调用的函数。
这行代码：if(node.addEventListener)检查节点是否有一个叫做addEventListener的属性。如果该属性存在，它的行为与true相同，进入if块。
对addEventListener的检查是因为不同的浏览器对于事件绑定函数的实现方式不同。特别是在IE9之前的IE版本中只使用attachEvent。
为了解决这个问题，我们使用条件语句进行判断。如果浏览器支持addEventListener函数，则使用该函数进行事件绑定；否则，使用attachEvent函数进行事件绑定。这样可以确保在不同的浏览器下都能正确地绑定事件。
这个问题的出现原因是为了在不同浏览器中实现表单验证的功能。所以需要编写一个跨浏览器的函数来绑定事件处理程序（instantValidation）到所有输入框和文本框的"change"或"onchange"事件上。
为了实现跨浏览器的功能，代码中使用了两种不同的事件订阅方法。attachEvent 方法用于较旧的 IE 浏览器（5-8版本），而 addEventListener 方法通常适用于所有现代浏览器。addEvent 函数会检查这两个方法是否存在，并使用可用的方法，优先选择使用“现代”方法。
为了解决这个问题，我们可以使用以下代码来实现跨浏览器的表单验证功能：
function instantValidation() {
// 表单验证代码...
}
function addEvent(element, event, handler) {
if (element.attachEvent) {
element.attachEvent('on' + event, handler);
} else if (element.addEventListener) {
element.addEventListener(event, handler);
}
}
var inputElements = document.getElementsByTagName('input');
var textareaElements = document.getElementsByTagName('textarea');
for (var i = 0; i < inputElements.length; i++) {
addEvent(inputElements[i], 'change', instantValidation);
}
for (var j = 0; j < textareaElements.length; j++) {
addEvent(textareaElements[j], 'change', instantValidation);
}
通过以上代码，我们在所有输入框和文本框的"change"事件上绑定了 instantValidation 函数，从而实现了跨浏览器的表单验证功能。
JavaScript表单验证:理解函数调用
在上述内容中，出现了一个函数调用的问题。这个问题的原因是代码段作为一个事件处理程序，在不同的浏览器上起作用。
大多数浏览器使用addEventListener方法来添加事件处理程序。
一些Internet Explorer版本使用attachEvent。
该函数允许使用这两种方式。
它要求你传入...
...你想要添加事件的元素(node)
...你想要处理的事件类型(type)
...你想要事件执行的代码(callback)
浏览器事件: http://eloquentjavascript.net/chapter13.html
抽象层: http://en.wikipedia.org/wiki/Abstraction_layer
浏览器事件是指页面完全加载(onload)、点击某个元素(onclick)、改变输入(onchange)、光标移到一个元素上(onmouseover)等等...
http://www.w3schools.com/js/js_htmldom_events.asp
如何在onSubmit上调用验证...
下面的代码通过遍历每个input和textarea元素，并为每个元素添加onchange事件来添加验证。但是你想要的是在onsubmit时进行验证，这需要像下面这样的代码：
addEvent("myform","onsubmit", function(){
//逐个字段进行验证。
//如果所有字段都通过，返回true。
//如果一个或多个字段失败，返回false。
})
如果你愿意，甚至可以删除onChange事件。这是你的选择。这里的主要问题是你需要确保只验证表单内的字段，你可以参考这个答案获取更多信息：Best Practice: Access form elements by HTML id or name attribute? ...循环遍历所有元素，并在上面提到的addEvent中验证每个元素，它必须返回true或false，以允许表单提交或停止提交并显示验证错误。
请记住！作为个人建议...在服务器端，即使你有客户端验证，你仍然需要进行验证。浏览器很容易被操纵，所以可能会发送错误的数据到服务器。无论如何，请始终进行服务器端验证。
哇！这是很多信息;)我会阅读你提供的文档并尝试一下！非常感谢你:)
没问题，再次欢迎！