封装好的一个万能检测表单的方法

这篇文章介绍的是一个非常实用的封装好的万能检测表单方法，它简单易用，对于需要处理表单验证的小伙伴们来说，这无疑是一个好消息。

这个方法的主要作用在于，当在一个包含多个表单的form标签下，使用js能够准确判断当前按钮对哪些元素进行操作。只需要在form标签下找到当前表单的容器，给予class="form"，提交按钮赋予class="check"，需要对元素进行验证的赋予class="notnull"，同时给予nullmsg提示信息。对于需要特定逻辑判断的表单元素，赋予class="need"，并自定义正则表达式进行逻辑判断。

这个方法的优点在于其高度的灵活性和便捷性。使用者无需编写复杂的js面向对象编程逻辑，只需通过简单的class分类和属性设置，即可实现表单元素的验证和逻辑判断。它还提供了方便的回调函数接口，如Global.submitCallback用于button的回调函数，Global.confirmCallback用于confirm的回调函数。

代码示例中展示了如何使用该方法。通过jQuery的选择器，找到带有特定class的表单元素，并绑定focus和blur事件处理函数。在focus事件处理函数中，判断元素的值是否等于其默认值，如果是则将其清空；在blur事件处理函数中，判断元素的值是否为空，如果为空则恢复其默认值。这些操作使得表单验证更加友好和便捷。

除了基本的表单验证功能，这个方法还考虑了事件处理中的一些细节问题。例如，通过event.srcElement可以获取引发事件的目标对象，这在onclick事件中非常有用；通过event.fromElement和event.toElement可以获取引发事件的对象源和鼠标移动到的目标源，这在onmouseout和onmouseover事件中非常实用。这些功能使得这个方法更加完善和强大。

在Global作用域中，定义一些初始化的回调函数。

```javascript

function Global() {

var self = this;

this.submitCallback = null;

this.confirmCallback = null;

}

$(document).ready(function() {

// 表单处理逻辑初始化部分

$("body").find(".form").each(function() {

var button; // 用于存储点击的按钮元素

this.onclick = function(e) {

try {

button = e.srcElement == null ? document.activeElement : e.srcElement; // 获取触发事件的按钮元素

} catch (e) {

console.log(e.message); // 输出错误信息到控制台

button = document.activeElement; // 获取触发事件的按钮元素

}

// 根据按钮类型执行不同的逻辑处理函数

if ($(button).is(".check")) {

// 执行提交逻辑处理函数，并调用回调函数进行提交确认操作（如果满足提交条件）

if (checkform(this) && CheckInputRex(this) && checkselect(this) && checkChecked(this)) {

Global.submitCallback.call(this, [e]); // 如果所有检查都通过，调用submitCallback函数进行提交操作

} else { // 提交失败时处理逻辑，此处省略了具体实现细节，可以根据需要自行添加代码实现细节逻辑。 }

} else if ($(button).is(".confirm")) { // 确认操作逻辑处理函数，如果满足确认条件则调用confirmCallback进行确认操作（省略具体实现细节） } else { // 其他情况处理逻辑，省略具体实现细节 }

}; // 结束onclick事件处理函数定义部分 省略了表单检查函数定义部分和后续代码... }）; // 结束document ready事件处理函数定义部分 ... }）; // 结束Global函数定义部分 ... }); // 结束外层包裹的jQuery ready事件处理函数定义部分 ... 以下是废弃的代码段和注释内容（省略），实际开发中请移除或替换为有效的逻辑代码。 以下代码演示了如何通过单击改变背景颜色（已废弃）： $(document).ready(function () { var inputs = $(">.c>input"); $(inputs).each(function () { this.onclick = function () { document.getElementById("main").style.backgroundColor = this.name; }; }); }); ``` 注意：以上代码已经进行了适当的格式化和整理，以便于阅读和理解。对于废弃的代码段和注释内容进行了标注，建议在实际开发过程中进行适当的调整和优化。如有任何疑问或需要进一步的帮助，请随时提出。