JS 表单验证大全

1.只能输入数字和英文的： &lt;input onkeyup=”value=value.replace(/[/W]/g,”) ” onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^/d]/g,”))” ID=”Text1″ NAME=”Text1″&gt; 2.只能输入数字的： &lt;input onkeyup=”value=value.replace(/[^/d]/g,”) ” onbeforepaste=”clipboardData.setData(‘text’,clipboardDa 【JS 表单验证详解】 在网页开发中，表单验证是必不可少的一环，它确保用户输入的数据符合预期，防止因错误数据导致的问题。本文将详细介绍如何使用JavaScript（JS）进行表单验证，并提供几个实用的验证示例。 1. **只能输入数字和英文** 这个验证规则用于限制输入框只允许用户输入数字和英文字符。通过`onkeyup`和`onbeforepaste`事件，结合正则表达式`/[\W]/g`来实现。`[\W]`匹配任何非单词字符（等同于`[^\w]`），`g`标志表示全局匹配。代码如下： ```html <input onkeyup=”value=value.replace(/[\W]/g,”) ” onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[\W]/g,”))” ID=”Text1″ NAME=”Text1″> ``` 2. **只能输入数字** 这个规则仅允许用户输入数字，不允许其他字符。同样使用`onkeyup`和`onbeforepaste`事件，结合正则表达式`/[^/d]/g`，`/d`匹配数字，`^`表示否定，`g`标志全局匹配。代码如下： ```html <input onkeyup=”value=value.replace(/[^/d]/g,”) ” onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^/d]/g,”))” ID=”Text2″ NAME=”Text2″> ``` 3. **只能输入全角字符** 对于全角字符（包括全角数字、字母、标点等）的验证，可以使用`/[^/uFF00-/uFFFF]/g`这个正则表达式。全角字符的Unicode范围是从`U+FF00`到`U+FFFF`。代码如下： ```html <input onkeyup=”value=value.replace(/[^/uFF00-/uFFFF]/g,”)” onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^/uFF00-/uFFFF]/g,”))” ID=”Text3″ NAME=”Text3″> ``` 4. **只能输入汉字** 汉字的Unicode范围是`U+4E00`到`U+9FA5`，因此可以使用`/[^/u4E00-/u9FA5]/g`来进行验证。代码如下： ```html <input onkeyup=”value=value.replace(/[^/u4E00-/u9FA5]/g,”)” onbeforepaste=”clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^/u4E00-/u9FA5]/g,”))” ID=”Text4″ NAME=”Text4″> ``` 除了以上直接在HTML中的验证方式，还可以通过JavaScript函数进行更复杂的验证。下面是一个简单的JavaScript验证函数示例： ```javascript function vdf() { var i, j, name, value, message, length, type, a = vdf.arguments, cb_name; for (i = 0; i < (a.length - 2); i += 3) { // ... (处理逻辑) } // 验证非法字符 // ... (处理逻辑) // 判断复选框是否选中 // ... (处理逻辑) // 判断下拉框是否选择 // ... (处理逻辑) // 不能为空的判断 // ... (处理逻辑) // 不能为空的判断, 但不获得焦点 // ... (处理逻辑) } ``` 在这个示例中，`vdf`函数接收一系列参数，包括控件名称、提示信息和验证类型。根据不同的验证类型，函数会执行相应的检查，如检查复选框是否被选中、下拉框是否有选择，以及输入字段是否为空等。 JavaScript提供了丰富的功能来实现表单验证，不仅可以控制用户输入的字符类型，还可以检查输入的长度、格式，甚至可以与服务器进行异步验证。通过结合HTML属性和JavaScript函数，开发者可以创建出强大且灵活的表单验证机制，提升用户体验并确保数据的准确性。在实际项目中，建议封装这些验证规则为独立的函数，以提高代码的可维护性和重用性。