JavaScript表单验证方法示例

本文主要介绍了在网页表单提交过程中进行验证的一些JavaScript函数示例，包括检查表单项是否为空、比较两个表单项的值是否相同以及验证表单项是否只包含数字和下划线（适用于电话号码或银行账号验证）。 在网页开发中，表单提交验证是非常关键的一个环节，它可以确保用户输入的数据符合预设的规则，减少服务器端的压力，并提供更好的用户体验。以下是一些常见的表单验证方法： 1. 表单项不能为空： 在这个例子中，`CheckForm` 函数用于验证名为 "name" 的表单项是否为空。如果用户未填写姓名，函数会弹出警告，并将焦点返回到姓名输入框，阻止表单的默认提交行为。 ```javascript function CheckForm() { if (document.form.name.value.length == 0) { alert("请输入您姓名!"); document.form.name.focus(); return false; } return true; } ``` 2. 比较两个表单项的值是否相同： 这个函数用于验证用户在 "PWD" 和 "PWD_Again" 两个字段中输入的密码是否一致。如果两次输入的密码不匹配，函数会提示用户重新输入，并将焦点设置到密码输入框。 ```javascript function CheckForm() { if (document.form.PWD.value != document.form.PWD_Again.value) { alert("您两次输入的密码不一样！请重新输入."); document.ADDUser.PWD.focus(); return false; } return true; } ``` 3. 表单项只能为数字和 "_"： `isNumber` 函数用于检查字符串是否只包含数字和下划线，适合用于验证电话号码或银行账号。它首先定义了一个包含允许字符的字符串 `Letters`，然后遍历输入的字符串，如果发现有不在允许字符中的字符，则返回 `false`。如果整个字符串都符合要求，函数返回 `true`。 ```javascript function isNumber(String) { var Letters = "1234567890-"; var i, c; if (String.charAt(0) == '-') return false; if (String.charAt(String.length - 1) == '-') return false; for (i = 0; i < String.length; i++) { c = String.charAt(i); if (Letters.indexOf(c) < 0) return false; } return true; } function CheckForm() { if (!isNumber(document.form.TEL.value)) { alert("您的电话号码不合法！"); document.f... } } ``` 这些函数可以单独使用，也可以组合在一起，以实现更复杂的表单验证逻辑。开发者可以根据实际需求对这些函数进行修改和扩展，比如添加更多类型的验证规则，或者使用更现代化的验证库，如jQuery Validate，或者利用HTML5的内置验证属性来简化代码和提高兼容性。同时，为了提升用户体验，验证错误应友好地显示，并在用户输入不符合要求时立即给出反馈，而不是等到表单提交时才提示。