常用js表单验证控制代码大全
你提供的代码和函数展示了如何在JavaScript中进行各种表单验证。以下是一些关键点和示例,帮助你更好地理解和使用这些函数:
常用的表单验证函数
-
检查输入是否为空
function isEmpty(input) { return input.value.trim() === ''; }
-
检查输入是否为数字
function isNumber(input) { return !isNaN(input.value); }
-
检查输入长度
function checkLength(input, min, max) { const value = input.value.trim(); if (value.length < min || value.length > max) { return false; } return true; }
-
检查电子邮件格式
function isValidEmail(email) { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(email.value); }
-
检查密码长度和复杂度
function isStrongPassword(password) { const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/; return passwordRegex.test(password.value); }
-
检查输入是否为中文
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>
注意事项
- 输入标题(title):在HTML中为每个需要验证的输入字段添加
title
属性,用于显示错误提示信息。 - 表单事件处理:使用
onsubmit
事件来调用验证函数,确保在提交表单时进行验证。 - 动态DOM操作:如果表单包含动态生成的元素,可能需要额外的逻辑来处理这些元素。
通过这些示例和说明,你应该能够更好地理解和实现各种表单验证功能。