关于算法的设计、性能和跨浏览器兼容性，我的目的是听取您对以下脚本的看法和批评。
我刚刚开始接触 JavaScript，已经有一段时间错过了它的美妙之处。我的背景和经验是开发基于 C/C++/PHP 的 RESTful 后端。
为了理解这门语言和正确的使用方法，我决定做一些我确信以前做过很多次的事情。但无论如何，学习使用新的语言和范式通常都会带来痛苦。
这是我尝试创建一个正常的表单处理和验证脚本/函数。为了降低复杂性并保持代码简单/干净，我决定使用 HTML5 自定义数据属性 (data-*) 为表单中的每个元素分配元数据：
数据要求：真或假。如果设置为 true，则此参数使表单字段为必需，因此它不能为空。设置为 false 的值表示该字段是可选的。默认为假。>
Data-Type：要执行的验证类型。示例包括“电子邮件”、“密码”、“数字”或任何其他“正则表达式”。
这种形式的一个简单的例子是：
<form action="postlistings" id="postlistings" enctype='multipart/form-data' method="post" class="postlistings">
<ul class="login-li">
<li>
<input class="title" name="title" type="title" id="title" data-required="true" data-type="title"></a>
</li>
<li>
<textarea name="body" id="elm1" class="elm1" name="elm1" data-type="body" data-required="true" >
</textarea>
</li>
<li>
<span class="nav-btn-question">Add Listing</span>
</li>
</ul>
</form>
提醒：这是我的第一段 JavaScript 代码。这个想法是在传递表单名称的同时调用 Form 以在一个循环中检索和验证所有字段值以提高性能。验证涉及两个步骤，从上述 Data-* 属性中可以猜到：
一世。检查所需的表单字段。
如果值不符合步骤 1 的要求，则会从配置中提取特定表单值的错误消息。因此，对于所有不满足此要求的值，将收集一组错误消息并将其传递给视图。
ii. 执行相应的验证。
仅当所有值都通过了步骤 1 时才执行验证。否则，它们遵循与上述 1 中指示的相同步骤。
function Form(){
var args = Array.prototype.slice.call(arguments),
formName = args[0],
callback = args.pop(),
userError = [{type: {}, param: {}}],
requiredDataParam = 'required',
typeDataParam = 'type',
form = document.forms[formName],
formLength = form.length || null,
formElement = {id: {}, name: {}, value: {}, required: {}, type: {}};
function getFormElements(){
var num = 0;
var emptyContent = false;
for (var i = 0; i < formLength; i += 1) {
var formField = form[i];
formElement.id[i] = inArray('id', formField) ? formField.id : null;
formElement.name[i] = inArray('name', formField) ? formField.name : null;
formElement.value[i] = inArray('value', formField) ? formField.value : null;
formElement.required[i] = getDataAttribute(formField, requiredDataParam);
formElement.type[i] = getDataAttribute(formField, typeDataParam);
if (formElement.required[i] === true){
if(!formElement.type[i]) {
error('Validation rule not defined!');
}
else if (!formElement.value[i]) {
userError[num++] = {'type': 'required', 'param': form[i]};
emptyContent = true;
}
}
if (emptyContent === false) {
// Perform validations only if no empty but required form values were found.
// This is so that we can collect all the empty
// inputs and their corresponding error messages.
}
}
if (userError) {
// Return empty form errors and their corresponding error messages.
}
return formElement;
};
// Removed the getFormParam function that was not used at all.
return {
getFormElements: getFormElements
}
};
上面 JS 脚本中使用的两个外部函数（来自 JQuery 源）：
var inArray = function(elem, array){
if (array.indexOf){
return array.indexOf(elem);
}
for (var i = 0, length = array.length; i < length; i++){
if (array[i] === elem){
return i;
}
}
return -1;
}
// This is a cross-platform way to retrieve HTML5 custom attributes.
// Source: JQuery
var getDataAttribute = function(elem, key, data) {
if (data === undefined && elem.nodeType === 1) {
data = elem.getAttribute("data-" + key);
if (typeof data === "string") {
data = data === "true" ? true :
data === "false" ? false :
data === "null" ? null :
!CheckType.isNaN ? parseFloat(data) :
CheckType.rbrace.test(data) ? parseJSON(data) :
data;
}
else {
data = undefined;
}
}
return data;
}
配置错误消息的示例可以设置如下：
var errorMsgs = {
ERROR_email: "Please enter a valid email address.",
ERROR_password: "Your password must be at least 6 characters long. Please try another",
ERROR_user_exists: "The requested email address already exists. Please try again."
};
当我发布此内容供您查看时，请忽略我可能未遵循的任何样式约定。我的目的是让你的专家评论我应该做的任何不同的事情，或者在代码本身和算法方面可以做得更好。
除了样式约定，欢迎所有批评和问题。