我是JavaScript的新手，试图在表单验证上找到自己的方式。我一直在阅读书籍和在线教程，我在网上发现了以下代码，在我看来，这是非常优雅和可维护的。不幸的是，我在JavaScript方面的技能还不足以理解一切。我在这里请求您帮助理解定义的不同功能。
我还想在一个事件（onSubmit事件）上调用InstantValidation函数，在一个独立的.js文件中调用它（基于事件监听器），所以请你帮我调整一下这个函数吗？
以下是代码：
<html>
<body>
<form id="myform" action="#" method="get">
<fieldset>
<legend><strong>Add your comment</strong></legend>
<p>
<label for="author">Name <abbr title="Required">*</abbr></label>
<input name="author" id="author" value=""
required="required" aria-required="true"
pattern="^([- \w\d\u00c0-\u024f]+)$"
title="Your name (no special characters, diacritics are okay)"
type="text" spellcheck="false" size="20" />
</p>
<p>
<label for="email">Email <abbr title="Required">*</abbr></label>
<input name="email" id="email" value=""
required="required" aria-required="true"
pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$"
title="Your email address"
type="email" spellcheck="false" size="30" />
</p>
<p>
<label for="website">Website</label>
<input name="website" id="website" value=""
pattern="^(http[s]?:\/\/)?([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2}(\/([-~%\.\(\)\w\d]*\/*)*(#[-\w\d]+)?)?$"
title="Your website address"
type="url" spellcheck="false" size="30" />
</p>
<p>
<label for="text">Comment <abbr title="Required">*</abbr></label>
<textarea name="text" id="text"
required="required" aria-required="true"
title="Your comment"
spellcheck="true" cols="40" rows="10"></textarea>
</p>
</fieldset>
<fieldset>
<button name="preview" type="submit">Preview</button>
<button name="save" type="submit">Submit Comment</button>
</fieldset>
</form>
<script type="text/javascript">
(function()
{
//add event construct for modern browsers or IE
//which fires the callback with a pre-converted target reference
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);
});
}
}
//identify whether a field should be validated
//ie. true if the field is neither readonly nor disabled,
//and has either "pattern", "required" or "aria-invalid"
function shouldBeValidated(field)
{
return (
!(field.getAttribute('readonly') || field.readonly)
&&
!(field.getAttribute('disabled') || field.disabled)
&&
(
field.getAttribute('pattern')
||
field.getAttribute('required')
)
);
}
//field testing and validation function
function instantValidation(field)
{
//if the field should be validated
if(shouldBeValidated(field))
{
//the field is invalid if:
//it's required but the value is empty
//it has a pattern but the (non-empty) value doesn't pass
var invalid =
(
(field.getAttribute('required') && !field.value)
||
(
field.getAttribute('pattern')
&&
field.value
&&
!new RegExp(field.getAttribute('pattern')).test(field.value)
)
);
//add or remove the attribute is indicated by
//the invalid flag and the current attribute state
if(!invalid && field.getAttribute('aria-invalid'))
{
field.removeAttribute('aria-invalid');
}
else if(invalid && !field.getAttribute('aria-invalid'))
{
field.setAttribute('aria-invalid', 'true');
}
}
}
//now bind a delegated change event
//== THIS FAILS IN INTERNET EXPLORER <= 8 ==//
//addEvent(document, 'change', function(e, target)
//{
// instantValidation(target);
//});
//now bind a change event to each applicable for field
var fields = [
document.getElementsByTagName('input'),
document.getElementsByTagName('textarea')
];
for(var a = fields.length, i = 0; i < a; i ++)
{
for(var b = fields[i].length, j = 0; j < b; j ++)
{
addEvent(fields[i][j], 'change', function(e, target)
{
instantValidation(target);
});
}
}
})();
</script>
</body>
</html>
特别是，以下代码对我来说并不清楚：
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);
});
}
}
任何帮助（即使是非常简短的解释）都将受到高度赞赏！
答案 0 :(得分：2)
一个代码部分充当事件处理程序，但可以在各种不同的浏览器中运行。
大多数浏览器使用addEventListener方式添加事件处理程序。
某些Internet Explorer版本使用attachEvent：http://msdn.microsoft.com/en-us/library/ie/ms536343(v=vs.85).aspx
该功能允许使用两种方式。
你传了进来......
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 ... //now bind a change event to each applicable for field
下面的代码遍历每个input和textarea元素，并为每个onchange事件添加验证。但您想要做的是验证onsubmit，这需要类似这样的内容，低于另一个addEvent调用：
addEvent("myform","onsubmit", function(){
//de Go field by field and validate.
//de If all the fields pass, return true.
//de If one or more fields fail, return false.
})
如果需要，您甚至可以删除onChange个活动。这是你的选择。这里最重要的是你需要确保只验证表单内部的字段，你可以查看这个答案，了解更多信息：Best Practice: Access form elements by HTML id or name attribute? ...遍历所有元素，并验证每个我在上面提到的addEvent中必须返回true或false以允许提交表单，或停止提交并显示存在验证错误。
请记住！作为个人意见......在服务器端，即使您有客户端验证，仍然仍希望进行验证。浏览器易于操作，因此您可能仍会将错误数据发送到服务器。始终，始终执行服务器端验证，无论客户端如何。
答案 1 :(得分：1)
它看起来像一个跨浏览器函数，它将处理程序（instantValidation）附加到所有输入和textarea控件的“更改”或“onchange”事件。
我说跨浏览器是因为存在两个单独的事件订阅方法。 attachEvent适用于较旧的IE浏览器（5-8），而addEventListener通常适用于所有现代浏览器。
此addEvent函数检查所述函数的存在并使用任何可用的函数，优先使用“现代”方式。
答案 2 :(得分：1)
这是用于将事件处理程序附加到DOM元素引发的事件的跨浏览器代码。函数（addEvent）的参数如下：
node：将附加事件的DOM节点对象（可通过类似getElementById的函数检索）
type：事件名称，例如change，focus等。
callback：引发事件时调用的函数。
此行：if(node.addEventListener)检查节点是否具有名为addEventListener的属性。如果该属性存在，则其行为与true相同，并输入if块。
检查addEventListener已完成，因为不同的浏览器以不同方式实现此事件附件功能。也就是说，IE9之前的IE版本仅使用attachEvent。