JavaScript表单验证实用技巧

"JavaScript验证表单大全" 在网页开发中，表单验证是必不可少的一环，它可以确保用户输入的数据符合预设的规范，减少服务器端的处理负担，并提供更好的用户体验。JavaScript作为客户端脚本语言，非常适合用于实现这种实时的数据验证。下面我们将详细探讨几种常见的JavaScript表单验证技术。 1. 长度限制验证： 这段代码演示了如何限制textarea中的字符数不超过50。`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="检查"> </form> ``` 2. 只允许中文输入： 这个例子通过`onkeyup`事件监听用户输入，只允许输入汉字。它使用正则表达式`/[^\u4E00-\u9FA5]/g`匹配非汉字字符并替换为空。 ```html <input onkeyup="this.value = this.value.replace(/[^\u4E00-\u9FA5]/g, '')"> ``` 3. 只允许英文字母输入： 此示例限制输入只能是英文字母。`onlyEng()`函数在`onkeydown`事件触发时检查按键码，确保它在大写或小写字母的范围内。 ```html <script language="javascript"> function onlyEng() { if (!(event.keyCode >= 65 && event.keyCode <= 90)) // 检查字母键 event.returnValue = false; } </script> <input onkeydown="onlyEng();"> ``` 4. 只允许数字输入： 这段代码限制输入只能是数字，包括小键盘上的数字。`onlyNum()`函数同样在`onkeydown`事件中运行，检查按键码是否在数字键的范围内。 ```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`和`onbeforepaste`事件结合使用，确保输入的字符始终为数字。 ```html <input onkeyup="this.value = this.value.replace(/[\W]/g, '')" onbeforepaste="clipboardData.setData('text', clipboardData.getData('text').replace(/[^\d]/g, ''))"> ``` 6. 邮箱格式验证： 这是一个简单的邮箱验证函数，`isEmail(strEmail)`使用正则表达式检查输入的字符串是否符合邮箱格式。 ```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-z]{2,6}$/) == -1) { alert("请输入正确的电子邮件地址"); return false; } else { return true; } } </SCRIPT> ``` 以上是JavaScript在表单验证中的一些基本应用，实际开发中还可以根据需求扩展，例如验证电话号码、身份证号等。记住，虽然这些方法可以提供基础的前端验证，但为了安全起见，服务器端验证仍然是必需的。