JavaScript全场景表单验证实践

"JavaScript表单验证大全" 在网页开发中，表单验证是必不可少的一环，它确保用户输入的数据符合预设的规范，减少服务器端的处理负担，并提高用户体验。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. 汉字输入：这个例子确保用户只能输入汉字，通过正则表达式过滤非汉字字符。 ```html <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"> ``` 3. 英文字母输入：此代码限制输入框只接受英文字母，不允许输入其他字符。 ```html <script language="javascript"> function onlyEng() { if (!(event.keyCode >= 65 && event.keyCode <= 90)) { event.returnValue = false; } } </script> <input onkeydown="onlyEng();"> ``` 4. 数字输入：这个验证函数确保用户只能输入数字，包括整数和小数。 ```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. 只允许字母和数字输入：这个例子允许用户输入字母和数字，但排除特殊字符。 ```html <input onkeyup="value=value.replace(/[\W]/g,'"')" onbeforepaste="clipboardData.setData('text', clipboardData.getData('text').replace(/[^\d]/g,''))"> ``` 6. 邮箱格式验证：下面的函数检查输入的字符串是否符合邮箱的格式。 ```javascript function isEmail(strEmail) { if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/) == -1) { return false; } else { return true; } } ``` 这个函数使用正则表达式来验证邮箱地址是否合法。 通过这些实例，我们可以看到JavaScript在表单验证中的强大能力，可以根据需求定制各种复杂的验证规则。需要注意的是，前端验证虽然重要，但为了数据安全，服务器端的验证同样不可或缺。