JavaScript表单验证技巧集锦

"JavaScript验证代码大全" 在网页表单中，数据验证是非常重要的一环，它确保用户输入的数据符合预设的格式和规则，从而提高数据的准确性和安全性。JavaScript是一种常用的前端验证语言，可以在客户端实时检查用户输入，避免无效或不合法的数据提交到服务器。以下是一些JavaScript验证代码示例： 1. 长度限制： 这段代码用于限制文本输入框的字符长度。`test()` 函数会在表单提交时被调用，检查`b`字段的值是否超过50个字符。如果超过，则弹出警告，并使焦点返回到该输入框，阻止表单提交。 ```html <script> function test() { if (document.a.b.value.length > 50) { alert("不能超过50个字符！"); document.a.b.focus(); return false; } } </script> <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. 只能输入汉字： 这个输入框只允许用户输入汉字。`onkeyup`事件触发后，会使用正则表达式`/[^\\u4E00-\\u9FA5]/g`来匹配非汉字字符并替换为空。 ```html <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"> ``` 3. 只能输入英文： 此代码片段用于限制输入框只能输入英文字符。`onlyEng()` 函数在按键下落时执行，如果按键码不在英文字符范围内（A-Z，a-z），则阻止默认行为。 ```html <script language="javascript"> function onlyEng() { if (!(event.keyCode >= 65 && event.keyCode <= 90)) // 大写字母 event.returnValue = false; } </script> <input onkeydown="onlyEng();"> ``` 4. 只能输入数字： 这个输入框仅允许输入数字。`onlyNum()` 函数同样在按键下落后执行，检查按键码是否在数字键范围内，包括主键盘和小键盘。 ```html <script language="javascript"> function onlyNum() { if (!((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105))) // 主键盘和小键盘数字 event.returnValue = false; } </script> <input onkeydown="onlyNum();"> ``` 5. 只能输入英文和数字： 这个输入框允许用户输入英文字符和数字。`onkeyup`事件会替换掉所有非英文和数字的字符。 ```html <input onkeyup="value=value.replace(/[\W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"> ``` 6. 验证邮箱格式： `isEmail()` 函数用于检查输入的邮箱地址是否符合标准的邮箱格式。如果匹配成功，函数返回`true`，否则显示警告。 ```javascript <SCRIPT LANGUAGE="javascript" RUNAT="Server"> function isEmail(strEmail) { if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1) return true; else alert("邮箱格式错误!"); } </SCRIPT> <input type="text" onblur="isEmail(this.value)"> ``` 以上这些JavaScript验证代码可以用于各种常见的表单字段，如限制输入长度、类型以及格式验证，有效地提高了用户体验和数据质量。