在编写前端代码时，表单验证是一个必不可少的任务。表单验证可以确保用户提交的数据符合预期，并且可以防止非法输入和攻击。但是，在处理表单验证时，我们经常会遇到一个问题：应该使用 onsubmit="return functionname()" 还是 onsubmit="functionname()"？本文将探讨这个问题的原因和答案，并提供相关示例代码。
为什么需要表单验证？
表单验证是一种在客户端验证用户输入数据的方式。它可以减少服务器负担并提高用户体验。通过表单验证，我们可以：
- 验证用户输入是否符合预期
- 避免因无效、不完整或恶意数据而导致的安全漏洞
- 提高用户界面的易用性和友好度
表单验证的实现方式
在 HTML 中，表单验证可以通过使用 JavaScript 的以下两种方式来实现：
- 内联事件处理程序：使用
onsubmit属性指定 JavaScript 函数名称 - 外部脚本文件：将 JavaScript 代码放在单独的文件中并链接到 HTML 页面中
下面我们将详细探讨第一种方式。
onsubmit 属性和表单验证
在 HTML 中，我们可以使用 onsubmit 属性来为一个表单元素指定一个 JavaScript 函数。在用户提交表单时，该函数将被调用。
以下是一个简单的示例代码：
----- ---------------- ---------------- ---- ---- --- ------- -------- -------- -------------- - -- ------ ------ ----- -- -- ---- - ----- - ---------
在上面的代码中，我们为表单元素指定了 onsubmit 属性，并将其设置为 validateForm() 函数。当用户提交表单时，该函数将被调用。该函数将执行表单验证，并返回 true 或 false。
现在我们来看看 onsubmit 属性的两种不同写法：onsubmit="functionname()" 和 onsubmit="return functionname()"。
onsubmit="functionname()"
onsubmit="functionname()" 的写法会在表单提交时调用指定的函数。如果该函数返回 undefined、null 或 true，则表单将被提交。如果该函数返回 false，则表单不会被提交。
以下是一个示例代码：
----- ---------------- ----------------
---- ---- ---
-------
--------
-------- -------------- -
-- ------
-- ------- -
------ -----
- ---- -
------------------
------ ------
-
-
---------在该示例代码中，validateForm() 函数将验证表单输入并返回 true 或 false。如果返回 true，则表单将被提交。如果返回 false，则不会提交表单，并弹出警告框提示用户填写必要信息。
这种写法看起来非常简洁，但是它有一个问题：如果函数返回除 undefined、null 或 true 以外的任何值，则表单都将被提交。这可能会导致一些潜在的安全风险和错误。
onsubmit="return functionname()"
相比之下，使用 onsubmit="return functionname()" 的写法更加严谨和安全。该写法会在表单提交时调用指定的函数，并根据函数的返回值确定是否提交表单。如果函数返回 true，则表单将被提交。如果函数返回 false，则表单不会被提交。
以下是一个示例代码：
----- ---------------- ---------------- ---- ---- --- -- - ----------------------------------------------------------- -------- ---------------------------------------------------------------------------------------