JavaScript 全部表单验证案例
本文将详细讲解 JavaScript 实现的表单验证案例,涵盖了多种常见的验证规则,包括长度限制、汉字、英文、数字、英文字符和数字、邮箱格式、关键字屏蔽、两次输入密码是否相同等。
1. 长度限制
在本例中,我们使用 JavaScript 实现了对表单输入的长度限制。通过在 `<script>` 标签中编写 JavaScript 代码,我们可以在提交表单时对输入的长度进行检查,如果超过 50 个字符,系统将弹出警告框。
2. 只能是汉字
在这个例子中,我们使用了正则表达式来限制输入只能是汉字。通过在 `<input>` 标签中添加 `onkeyup` 事件,我们可以实时地对输入进行验证,如果输入了非汉字字符,系统将自动将其删除。
3. 只能是英文
在这个例子中,我们使用了 JavaScript 函数来限制输入只能是英文字符。通过在 `<input>` 标签中添加 `onkeydown` 事件,我们可以实时地对输入进行验证,如果输入了非英文字符,系统将自动将其删除。
4. 只能是数字
在这个例子中,我们使用了 JavaScript 函数来限制输入只能是数字。通过在 `<input>` 标签中添加 `onkeydown` 事件,我们可以实时地对输入进行验证,如果输入了非数字字符,系统将自动将其删除。
5. 只能是英文字符和数字
在这个例子中,我们使用了正则表达式来限制输入只能是英文字符和数字。通过在 `<input>` 标签中添加 `onkeyup` 事件,我们可以实时地对输入进行验证,如果输入了非英文字符和数字,系统将自动将其删除。
6. 验证邮箱格式
在这个例子中,我们使用了 JavaScript 函数来验证邮箱格式。通过在 `<SCRIPT>` 标签中编写 JavaScript 代码,我们可以对输入的邮箱地址进行验证,如果格式不正确,系统将弹出警告框。
7. 屏蔽关键字
在这个例子中,我们使用了 JavaScript 函数来屏蔽关键字。通过在 `<script>` 标签中编写 JavaScript 代码,我们可以对输入的关键字进行检查,如果包含屏蔽的关键字,系统将弹出警告框。
8. 两次输入密码是否相同
在这个例子中,我们使用了 JavaScript 函数来检查两次输入的密码是否相同。通过在 `<script>` 标签中编写 JavaScript 代码,我们可以对输入的密码进行验证,如果两次输入的密码不相同,系统将弹出警告框。
屏蔽右键
在这个例子中,我们使用了 HTML 代码来屏蔽右键菜单。通过在 `<body>` 标签中添加 `oncontextmenu`、`ondragstart`、`onselectstart` 事件,我们可以屏蔽右键菜单。
表单提交验证类
在这个部分中,我们将讲解如何使用 JavaScript 实现表单提交验证。我们可以使用 JavaScript 函数来检查表单项是否为空、比较两个表单项的值是否相同、限制表单项只能为数字和"_",用于电话/银行帐号验证等。
2.1 表单项不能为空
在这个例子中,我们使用了 JavaScript 函数来检查表单项是否为空。如果表单项为空,系统将弹出警告框。
2.2 比较两个表单项的值是否相同
在这个例子中,我们使用了 JavaScript 函数来比较两个表单项的值是否相同。如果两者不相同,系统将弹出警告框。
2.3 表单项只能为数字和"_",用于电话/银行帐号验证
在这个例子中,我们使用了 JavaScript 函数来限制表单项只能为数字和"_",用于电话/银行帐号验证等。