JavaScript全方位表单验证技巧

"JavaScript表单验证大全，包括非空验证、密码一致性、电子邮件格式验证以及各种限制和关键字屏蔽等。" 在Web开发中，JavaScript是一种常用的语言，用于实现客户端的交互和验证功能，尤其是在处理用户输入的表单数据时。表单验证是确保用户提交的数据符合预设规则的重要步骤，可以减少服务器端的负担并提高用户体验。以下是一些常见的JavaScript表单验证技巧： 1. 长度限制验证： 示例代码展示了如何验证textarea中的文本长度不超过50个字符。当用户输入超过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. 中文字符验证： 通过监听`keyup`事件，可以实时检查输入框只允许输入中文字符。当输入非中文字符时，自动替换为空。 ```html <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"> ``` 3. 英文字符验证： 类似地，我们可以创建一个函数`onlyEng()`，仅允许用户输入英文字符。通过检测键盘按键码，确保输入的字符在英文字母范围内。 ```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. 特殊字符验证： 限制输入字段只能包含英文字符和数字，可以使用正则表达式`/[\W]/g`来匹配并替换所有非单词字符。 ```html <input onkeyup="value=value.replace(/[\W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"> ``` 6. 电子邮件格式验证： 验证电子邮件地址的正确格式至关重要。以下是一个简单的电子邮件验证函数`isEmail()`，它使用正则表达式检查输入的字符串是否符合电子邮件格式。 ```javascript function isEmail(strEmail) { if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@\w+((\.|-)\w+)*\.\w+$/) == -1) { return false; } return true; } ``` 以上这些示例只是JavaScript表单验证的基本应用，实际项目中可能需要更复杂的逻辑，例如日期验证、URL验证等。开发者可以根据具体需求进行扩展和定制，以满足不同场景下的验证规则。同时，现代前端框架如React、Vue等提供了更强大的表单管理库，如Formik、VeeValidate等，可以更方便地处理表单验证。