javascript表单验证大全

JavaScript是一种广泛应用于网页和网络应用的脚本语言，它在客户端运行，为用户提供实时交互体验。在HTML表单中，JavaScript常用于实现前端验证，即在用户提交数据之前检查其输入的有效性，以减少无效数据的提交和服务器的负担。以下是一些常见的JavaScript表单验证方法： 1. **长度限制**： 这个示例限制了文本区域（textarea）的字符长度，如果超过50个字符，将弹出警告，并聚焦到该字段，不允许提交。 ```html <form name="a" onsubmit="return test()"> <textarea name="b" cols="40" wrap="VIRTUAL" rows="6"></textarea> <input type="submit" name="Submit" value="check"> </form> <script> function test() { if (document.a.b.value.length > 50) { alert("不能超过 50 个字符！"); document.a.b.focus(); return false; } } </script> ``` 2. **只能是汉字**： 此代码片段使用正则表达式 `/[^^\u4E00-\u9FA5]/g` 来检查输入值，只允许输入汉字。 ```html <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"> ``` 3. **只能是英文**： 这里通过监听键盘事件（keydown），只允许输入英文字符。 ```html <input onkeydown="onlyEng();"> <script> function onlyEng() { if (!(event.keyCode >= 65 && event.keyCode <= 90)) event.returnValue = false; } </script> ``` 4. **只能是数字**： 这个例子同样使用键盘事件，但只允许输入数字，包括主键盘和小键盘上的数字。 ```html <input onkeydown="onlyNum();"> <script> function onlyNum() { if (!((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105))) // 考虑小键盘上的数字键 event.returnValue = false; } </script> ``` 5. **只能是英文字符和数字**： 这个示例用正则表达式 `/[\W]/g` 来替换非字母和数字的字符。 ```html <input onkeyup="value=value.replace(/[\W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"> ``` 6. **验证邮箱格式**： 使用正则表达式检查输入的字符串是否符合电子邮件地址的格式。 ```html <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("oh"); } </SCRIPT> <input type="text" onblur="isEmail(this.value)"> ``` 7. **屏蔽关键字**： 如果输入值以特定关键词开头（例如 "***" 或 "****"），则显示警告并聚焦到该字段。 ```html <form name="a" onsubmit="return test()"> <input type="text" name="b"> <input type="submit" name="Submit" value="check"> </form> <script> function test() { if ((a.b.value.indexOf("***") == 0) || (a.b.value.indexOf("****") == 0)) { alert(":)"); a.b.focus(); return false; } } </script> ``` 8. **两次输入密码是否相同**： 当用户在两个输入框中输入的密码不一致时，会弹出警告并清空输入。 ```html <FORM METHOD="POST" ACTION=""> <input type="password" id="input1"> <input type="password" id="input2"> <input type="button" value="test" onclick="check()"> </FORM> <script> function check() { with (document.all) { if (input1.value != input2.value) { alert("false"); input1.value = ""; input2.value = ""; } else document.forms[0].submit(); } } </script> ``` 除了上述验证，还有其他常见的表单验证，如检查电话号码、日期格式、网址等。JavaScript表单验证可以极大地提高用户体验，因为错误反馈是即时的，但为了确保数据安全，服务器端验证仍然是必要的。此外，现代Web开发中，库和框架如jQuery和React也提供了更高级和灵活的表单验证解决方案。