JavaScript 表单验证实用代码集合

"JavaScript 表单验证大全包含了多种常见的表单验证方法，旨在确保用户输入的数据符合特定格式和要求，从而提高网站数据的准确性和安全性。以下是一些关键的JavaScript表单验证技术： 1. 长度限制验证：这个例子检查textarea中的字符长度，如果超过50个字符，会弹出警告并阻止表单提交。这是通过在`onsubmit`事件中调用函数`test()`实现的，该函数检查字段`b`的值长度，并返回`false`来防止表单提交。 ```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> ``` 2. 汉字字符验证：此代码片段确保输入的字符仅包含汉字。`onkeyup`事件触发时，`value`属性被更新，只保留汉字字符。 ```html <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"> ``` 3. 英文字母验证：这个示例只允许输入英文字母。`onkeydown`事件触发时，`onlyEng()`函数检查按键码，如果不在A-Z或a-z范围内，则阻止输入。 ```html <input onkeydown="onlyEng();"> ``` 4. 数字输入验证：`onlyNum()`函数确保输入的只有数字。它在`onkeydown`事件中检查按键码，只允许0-9的数字键。 ```html <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()`函数检查输入是否符合电子邮件地址的格式。它使用正则表达式`/^\w+((-\w+)|(\".*\"))@([a-zA-Z0-9.-]+)\.([a-zA-Z]{2,4})$/`来验证字符串是否为有效邮箱地址。 ```javascript function isEmail(strEmail) { if (strEmail.search(/^\w+((-\w+)|(\".*\"))@([a-zA-Z0-9.-]+)\.([a-zA-Z]{2,4})$/) != -1) { return true; } else { return false; } } ``` 以上JavaScript验证方法是Web开发中处理用户输入和表单验证的基础，通过它们可以创建更健壮、安全的交互体验。然而，为了提供更好的用户体验和更全面的验证，开发者通常还会结合使用HTML5的内置验证属性，如`required`、`pattern`等，以及现代前端框架如React、Vue等提供的表单管理库。"