JS两种类型的表单提交方法实例分析

这篇文章深入了JavaScript中表单提交的两种主要方法，结合实例详细了表单验证的实现技巧。

一、原始的表单提交方式

我们看到的是一个典型的HTML表单，其中包含了一个提交按钮。这个按钮在点击后会执行一个名为subForm()的JavaScript函数。这个函数主要负责表单验证。如果表单中的某些字段没有填写完整或者填写不正确，比如必填字段为空，身份证号码格式错误或者已注册等，函数会通过修改这些字段的样式并显示提示信息来进行前端验证，同时阻止表单的提交。只有当表单通过所有验证时，才会继续提交。

二、通过JS设置的表单提交

第二种方式中，我们看到的并不是一个传统的提交按钮，而是一个用于模拟提交的按钮。这个按钮实际上是一个链接（a标签），里面包含了一张图片。当用户点击这个按钮时，会触发一段JavaScript代码，这段代码同样会进行表单验证。如果验证通过，就会触发表单的提交。这种方式的优点在于可以通过CSS和JavaScript实现更多的自定义效果，比如按钮的样式、提交时的动画效果等。

这两种方式各有优点。第一种方式更传统，更容易理解和实现，适合对JS不是很熟悉的人。第二种方式则提供了更多的自定义空间，可以通过调整CSS和JavaScript代码来实现更多的功能，如动画效果、异步提交等。由于不是通过传统的表单提交，可以避免一些浏览器对于表单提交的默认行为，比如页面刷新等。

这篇文章对于理解JS表单提交和验证的实现方式有很大的帮助。无论是开发者还是普通用户，都可以通过这篇文章了解到表单提交和验证的基本原理和技巧。希望这篇文章能给大家带来启发和帮助。当点击提交按钮时，JavaScript代码开始执行一段重要的验证过程。在这个流程中，`loginForm`函数扮演着关键角色。它的任务是在表单提交前，检查所有带有`.notnull`类的输入元素是否都填写了值。

想象一下，用户在网页上填写表单，当点击提交按钮时，不希望因为某个字段未填写就直接提交。这就需要一个验证机制来确保数据的完整性。这正是`loginForm`函数的作用所在。

当调用`$("submit").click()`函数时，如果`loginForm`验证成功（即所有必填字段都已填写），那么表单就会顺利提交。否则，表单提交会被阻止。这个过程对于提高用户体验和防止无效的数据提交至关重要。

在这个过程中，如果用户忘记填写某个必填字段，比如用户名或密码，那么这个字段的样式会发生变化，以提醒用户。边框会变成醒目的红色，并显示“不能为空”的提示信息。该字段的`status`属性会被设置为`"1"`。这是通过遍历每个`.notnull`类的元素并检查其值来实现的。

如果某个必填字段未通过验证，函数会返回`false`，从而阻止表单的自动提交。这就是两种处理表单提交前奏的方式之一：通过JavaScript进行前端验证。这种方式可以提高用户体验，减少无效的数据提交，减轻服务器的负担。

对于对JavaScript感兴趣的读者，我们推荐查看我们的专题系列，涵盖了JavaScript的各个方面，包括前端验证、异步编程、性能优化等。我们相信这些内容会对你的JavaScript程序设计有所帮助。

前端验证是确保数据完整性和提高用户体验的重要手段。通过JavaScript进行表单验证，可以在用户提交表单前发现并纠正错误，从而提高数据的质量和用户体验。希望这篇文章对你有所帮助，更多内容请继续关注我们的专题系列。