JavaScript表单验证代码集锦

"该PDF文档收集了各种JavaScript表单验证的代码示例，涵盖了字符串长度限制、汉字与英文判断、数字验证、邮箱格式检查、字符过滤、密码验证等多个方面，旨在帮助开发者创建更加安全和用户体验良好的表单提交系统。" 在网页开发中，JavaScript是一种常用的客户端脚本语言，用于增强用户的交互体验，尤其是在表单验证方面。以下是对PDF中提及的JavaScript表单验证技术的详细说明： 1. **字符串长度限制**：通过JavaScript的`length`属性可以获取字符串的长度，例如`value.length`。当用户输入的字符串超过预设长度时，可以弹出警告并阻止表单提交，确保数据符合预期。 ```javascript function test() { if (document.a.b.value.length > 50) { alert("不能超过50个字符！"); document.a.b.focus(); return false; } } ``` 2. **汉字判断**：利用正则表达式可以判断输入是否全为汉字。例如，`/[^\u4E00-\u9FA5]/g`这个正则表达式会匹配所有非汉字字符，并替换为空。 ```html <input onkeyup="this.value = this.value.replace(/[^\u4E00-\u9FA5]/g, '')"> ``` 3. **英文判断**：同样使用正则表达式，可以确保输入的字符仅包含英文字母。`event.keyCode`用于获取按键的ASCII码，判断在A-Z（65-90）之间。 ```javascript function onlyEng() { if (!(event.keyCode >= 65 && event.keyCode <= 90)) { event.returnValue = false; } } ``` 4. **数字验证**：通过检测`event.keyCode`的范围，可以限制用户只能输入数字（48-57对应0-9的ASCII码）。 ```javascript function onlyNum() { if (!((event.keyCode >= 48 && event.keyCode <= 57))) { event.returnValue = false; } } ``` 5. **邮箱验证**：使用正则表达式验证邮箱格式是否正确，例如`/^[\w.-]+@[\w-]+(\.[\w-]+)+$/`。 ```javascript function validateEmail(email) { var pattern = /^[\w.-]+@[\w-]+(\.[\w-]+)+$/; if (!pattern.test(email)) { alert("邮箱格式不正确"); return false; } } ``` 6. **字符过滤**：可以设定特定规则，如屏蔽某些关键词，使用`replace()`函数配合正则表达式实现。 7. **密码验证**：通常包括长度、字符类型等要求，例如至少包含一个大写字母、小写字母、数字和特殊字符。 8. **空值检查**：通过`if (value == "")`或`if (!value)`来检查输入是否为空，确保用户必须填写。 9. **表单一致性验证**：比较两个输入项的值是否一致，常用于确认密码或手机号码。 10. **特定格式输入**：如限制输入只能为数字和下划线，或者限制输入的数值或长度。 11. **通用校验函数**：可以创建一个通用的文本域校验函数，根据不同的需求调用不同的验证规则。 这些验证方法可以单独使用，也可以组合使用，以满足不同表单验证的需求。为了提高用户体验，通常会在前端进行初步验证，但为了安全性，后端验证仍然是必不可少的。