/** * 表单验证工具类 */ class FormValidator { /** * 验证手机号格式 * @param {string} phone - 手机号 * @returns {boolean} 是否有效 */ static validatePhone(phone) { const phoneRegex = /^1[3-9]\d{9}$/; return phoneRegex.test(phone); } /** * 验证邮箱格式 * @param {string} email - 邮箱地址 * @returns {boolean} 是否有效 */ static validateEmail(email) { const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; return emailRegex.test(email); } /** * 验证账号格式(手机号或邮箱) * @param {string} account - 账号 * @returns {object} 验证结果 {valid, type, message} */ static validateAccount(account) { if (!account || account.trim() === '') { return { valid: false, type: null, message: '请输入手机号或邮箱' }; } account = account.trim(); // 判断是否为手机号 if (/^\d+$/.test(account)) { if (this.validatePhone(account)) { return { valid: true, type: 'phone', message: '' }; } else { return { valid: false, type: 'phone', message: '手机号格式不正确' }; } } // 判断是否为邮箱 if (account.includes('@')) { if (this.validateEmail(account)) { return { valid: true, type: 'email', message: '' }; } else { return { valid: false, type: 'email', message: '邮箱格式不正确' }; } } return { valid: false, type: null, message: '请输入正确的手机号或邮箱格式' }; } /** * 验证验证码格式 * @param {string} code - 验证码 * @returns {object} 验证结果 {valid, message} */ static validateVerifyCode(code) { if (!code || code.trim() === '') { return { valid: false, message: '请输入验证码' }; } code = code.trim(); if (!/^\d{6}$/.test(code)) { return { valid: false, message: '验证码必须为6位数字' }; } return { valid: true, message: '' }; } /** * 验证用户名格式 * @param {string} username - 用户名 * @returns {object} 验证结果 {valid, message} */ static validateUsername(username) { if (!username || username.trim() === '') { return { valid: false, message: '请输入用户名' }; } username = username.trim(); if (username.length < 2 || username.length > 20) { return { valid: false, message: '用户名长度应在2-20个字符之间' }; } // 允许中文、英文、数字、下划线 if (!/^[\u4e00-\u9fa5a-zA-Z0-9_]+$/.test(username)) { return { valid: false, message: '用户名只能包含中文、英文、数字和下划线' }; } return { valid: true, message: '' }; } /** * 显示错误信息 * @param {string} fieldId - 字段ID * @param {string} message - 错误信息 */ static showError(fieldId, message) { const field = document.getElementById(fieldId); const errorElement = document.getElementById(fieldId + 'Error'); if (field) { field.classList.add('error'); } if (errorElement) { errorElement.textContent = message; errorElement.classList.remove('hidden'); errorElement.classList.add('show'); } } /** * 清除错误信息 * @param {string} fieldId - 字段ID */ static clearError(fieldId) { const field = document.getElementById(fieldId); const errorElement = document.getElementById(fieldId + 'Error'); if (field) { field.classList.remove('error'); } if (errorElement) { errorElement.classList.add('hidden'); errorElement.classList.remove('show'); } } /** * 显示成功信息 * @param {string} fieldId - 字段ID * @param {string} message - 成功信息 */ static showSuccess(fieldId, message = '格式正确') { const field = document.getElementById(fieldId); if (field) { field.classList.remove('error'); // 移除可能存在的成功提示 const existingFeedback = field.parentNode.querySelector('.valid-feedback'); if (existingFeedback) { existingFeedback.remove(); } // 添加新的成功提示 const feedback = document.createElement('div'); feedback.className = 'valid-feedback'; feedback.textContent = message; field.parentNode.appendChild(feedback); // 3秒后移除成功提示 setTimeout(() => { if (feedback.parentNode) { feedback.remove(); } }, 3000); } } /** * 实时验证字段 * @param {string} fieldId - 字段ID * @param {Function} validator - 验证函数 */ static setupRealTimeValidation(fieldId, validator) { const field = document.getElementById(fieldId); if (!field) return; // 输入时验证 field.addEventListener('input', () => { const result = validator(field.value); if (result.valid) { this.clearError(fieldId); } else if (field.value.trim() !== '') { // 只有在有输入内容时才显示错误 this.showError(fieldId, result.message); } }); // 失去焦点时验证 field.addEventListener('blur', () => { const result = validator(field.value); if (result.valid) { this.clearError(fieldId); if (result.type) { this.showSuccess(fieldId, `${result.type === 'phone' ? '手机号' : '邮箱'}格式正确`); } } else { this.showError(fieldId, result.message); } }); } } // 导出供其他模块使用 if (typeof module !== 'undefined' && module.exports) { module.exports = FormValidator; }