JavaScript 表单验证：理解函数调用
Posted
技术标签:
【中文标题】JavaScript 表单验证：理解函数调用【英文标题】：JavaScript Form Validation: understanding function call 【发布时间】：2014-01-28 02:58:44 【问题描述】：我是 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);
);
任何帮助（即使是非常简短的解释）将不胜感激！
【问题讨论】：
我并没有完全编写您的 onSubmit 处理程序，但我向您展示了发生了什么，并解释了下面的代码。好问题。欢迎使用 ***。 【参考方案1】：#1 那是一个事件处理抽象层。
one 代码部分充当事件处理程序，但可以跨各种 不同的浏览器工作。
大多数浏览器使用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
#2 如何调用验证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 以允许提交表单，或者停止提交并显示存在验证错误。
请记住！作为个人建议...在服务器端，您仍然想要进行验证，即使您有客户端验证。浏览器很容易操作，所以你可能仍然有错误的数据发送到服务器。总是，总是无论客户端如何，都进行服务器端验证。
【讨论】：
哇！那'很多信息;）我将浏览您提供的文档并试一试！非常感谢:) 没问题，再来一次.. 欢迎！【参考方案2】：它看起来就像一个跨浏览器函数，将处理程序 (instantValidation) 附加到所有输入和文本区域控件的“更改”或“更改”事件。
我说跨浏览器是因为存在两种独立的事件订阅方法。 attachEvent 适用于较旧的 IE 浏览器 (5-8)，addEventListener 一般适用于所有现代浏览器。
这个addEvent 函数检查所述函数的存在并使用可用的任何东西，优先考虑“现代”方式。
【讨论】：
【参考方案3】：这是用于将事件处理程序附加到由 DOM 元素引发的事件的跨浏览器代码。函数 (addEvent) 的参数如下：
node：将附加事件的 DOM 节点对象（可通过类似 getElementById 的函数检索）
type：事件名称，如change、focus等
callback: 引发事件时调用的函数。
这一行：if(node.addEventListener) 检查节点是否具有名为addEventListener 的属性。如果该属性存在，则其行为与true 相同，并进入if 块。
检查addEventListener 是因为不同的浏览器实现这个事件附件功能的方式不同。即IE9之前的IE版本只使用attachEvent。
【讨论】：
以上是关于JavaScript 表单验证：理解函数调用的主要内容，如果未能解决你的问题，请参考以下文章