JavaScript表单验证教程：必填、数字、字母、电话验证

“js表单验证” 在网页开发中，表单验证是必不可少的一环，它用于确保用户输入的数据符合预设的规则，从而提高数据的准确性和安全性。JavaScript（简称JS）是一种广泛使用的客户端脚本语言，非常适合进行实时的表单验证。以下是一些常见的JS表单验证方法： 1. 长度验证：这个例子检查文本区域（textarea）内的字符数是否超过50。如果超过，则弹出警告，并将焦点返回到该文本区域，防止表单提交。代码中的`length`属性用于获取字符串长度，`onsubmit`事件用于在表单提交时触发验证函数。 ```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. 汉字验证：这个例子通过正则表达式只允许用户输入汉字。`onkeyup`事件监听键盘抬起时的输入，`replace`方法结合正则表达式`/[^[\u4E00-\u9FA5]/g`删除非汉字字符。 ```html <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"> ``` 3. 英文字母验证：此代码限制输入只能为英文字母。`onkeydown`事件在按键按下时触发，通过比较`keyCode`值判断是否为字母。如果不在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. 数字验证：这个例子只允许用户输入数字。`onkeydown`事件结合正则表达式检查按键码，阻止非数字键的输入。 ```html <script language="javascript"> function onlyNum() { if (!((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105))) // 数字键盘上的0-9 event.returnValue = false; } </script> <input onkeydown="onlyNum();"> ``` 5. 电话号码验证：这个例子允许输入数字和空格，但不允许其他特殊字符。`onkeyup`事件处理输入后的情况，`onbeforepaste`事件处理粘贴内容时的验证。 ```html <input onkeyup="value=value.replace(/[\W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"> ``` 6. 邮箱格式验证：这个函数`isEmail`用于检查输入的字符串是否符合邮箱地址的格式。使用`search`方法和正则表达式`/^\w+((-\w+)|(\.\w+))*\@(\w+\.)+\w+$/`来验证。 ```javascript function isEmail(strEmail) { if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@(\w+\.)+\w+$/) == -1) return false; else return true; } ``` 以上就是一些基础的JavaScript表单验证技术，它们可以帮助开发者实现对用户输入的有效控制，确保数据质量。然而，为了增强用户体验和安全性，通常还会结合服务器端验证，因为客户端验证可以被绕过。同时，对于复杂的验证需求，可以使用现成的验证库，例如jQuery Validation Plugin，它提供了丰富的验证规则和自定义选项。