258 lines
7.1 KiB
JavaScript
258 lines
7.1 KiB
JavaScript
/**
|
|
* 表单验证工具类
|
|
*/
|
|
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;
|
|
} |