JavaScript表单验证全解析：常用规则与实例

本文档是一份全面的JavaScript（Js）表单验证大全，详细介绍了如何使用Js来增强网页表单的用户输入有效性，确保数据的正确性和安全性。以下是一些关键的验证规则示例： 1. **长度限制**： 使用`<script>`标签定义一个名为`test()`的函数，当文本框`name="b"`的值长度超过50个字符时，会弹出警告并聚焦到该输入框，并阻止表单提交。通过在`<form>`的`onsubmit`事件中调用`return test();`来实现这个验证。 ```html <form name="a" onsubmit="return test()"> <textarea name="b" cols="40" wrap="VIRTUAL" rows="6"></textarea> <input type="submit" name="Submit" value="check"> </form> ``` 2. **只允许汉字输入**： 在`<input>`元素上设置`onkeyup`事件，利用正则表达式`/[^\u4E00-\u9FA5]/g`，替换所有非汉字字符，确保输入的仅为中国大陆常用汉字。 3. **只能是英文字符**： 使用`<input>`的`onkeydown`事件，`onlyEng()`函数检查输入的关键码，如果不在英文字母范围内（65-90），则阻止回车键触发默认行为。 4. **只能是数字输入**： 类似地，`onlyNum()`函数检查按键是否在数字键范围内（48-57或96-105，包括小键盘数字），如果不是，阻止回车。 5. **只能是英文字符和数字**： `onkeyup`事件结合正则表达式`/[\W]/g`，将所有非字母和数字的字符替换为空字符串，`onbeforepaste`属性用于处理粘贴事件，确保粘贴的内容也符合此规则。 这些示例展示了在前端开发中如何使用JavaScript对用户输入进行基本的验证，防止非法数据提交，提高用户体验和数据准确性。在实际项目中，可能还需要根据具体需求添加更多的验证条件，如邮箱、电话号码、日期等特定格式的验证。通过结合HTML、CSS和Js，开发者可以创建出强大且易用的表单验证系统。