常用js表单验证控制代码大全

你提供的代码和函数展示了如何在JavaScript中进行各种表单验证。以下是一些关键点和示例，帮助你更好地理解和使用这些函数：

常用的表单验证函数

1. 检查输入是否为空

   function isEmpty(input) { return input.value.trim() === ''; } 

2. 检查输入是否为数字

   function isNumber(input) { return !isNaN(input.value); } 

3. 检查输入长度

   function checkLength(input, min, max) { const value = input.value.trim(); if (value.length < min || value.length > max) { return false; } return true; } 

4. 检查电子邮件格式

   function isValidEmail(email) { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(email.value); } 

5. 检查密码长度和复杂度

   function isStrongPassword(password) { const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/; return passwordRegex.test(password.value); } 

6. 检查输入是否为中文

   function isChinese(input) { const chineseRegex = /^[\u4e00-\u9fa5]+$/; return chineseRegex.test(input.value); } 

综合的表单验证函数

以下是一个综合的表单验证函数示例，适用于多个输入字段：

function validateForm(form) { for (let i = 0; i < form.length; i++) { const input = form[i]; if (input.type === 'text' && input.title && isEmpty(input)) { alert(`${input.title}不能为空!`); input.focus(); return false; } if (input.id === 'sz' && !isNumber(input)) { alert(`${input.title}格式不对`); input.focus(); return false; } } return true; } 

使用示例

在你的HTML表单中，可以这样使用：

<form onsubmit="return validateForm(this)"> <label for="name">姓名:</label> <input type="text" id="name" title="姓名"> <br><br> <label for="email">电子邮件:</label> <input type="text" id="email" title="电子邮件"> <br><br> <label for="password">密码:</label> <input type="password" id="password" title="密码"> <br><br> <input type="submit" value="提交"> </form> 

注意事项

1. 输入标题（title）：在HTML中为每个需要验证的输入字段添加title属性，用于显示错误提示信息。
2. 表单事件处理：使用onsubmit事件来调用验证函数，确保在提交表单时进行验证。
3. 动态DOM操作：如果表单包含动态生成的元素，可能需要额外的逻辑来处理这些元素。

通过这些示例和说明，你应该能够更好地理解和实现各种表单验证功能。