ss_new_ui_skin_and_page/js/mp_validation/validation-manager.js

// 工具方法
const findParentTd = (element) => {
    let parent = element.parentElement;
    while (parent && parent.tagName !== 'TD') {
        parent = parent.parentElement;
    }
    return parent;
};

const isSameTd = (element1, element2) => {
    const td1 = findParentTd(element1);
    const td2 = findParentTd(element2);
    return td1 && td1 === td2;
};

class ValidationManager {
    constructor() {
        this.validations = new Map();
        this.dependRules = new Map(); // 存储依赖关系
    }

    // 添加验证规则
    add(ruleName, fields, options = {}, priority = 1) {
        if (!Array.isArray(fields)) {
            fields = [fields];
        }

        const rule = this._parseRule(ruleName);
        if (!rule) return;

        fields.forEach(field => {
            if (!this.validations.has(field)) {
                this.validations.set(field, []);
            }
            
            this.validations.get(field).push({
                rule: rule,
                options: {
                    msgPrfx: options.msgPrfx || field,
                    ...options
                },
                priority: priority
            });
        });

        if (options.relField) {
            const relElement = document.querySelector(`[name="${options.relField}"]`);
            if (relElement) {
                relElement.addEventListener('change', () => {
                    this.validateField(field);
                });
            }
        }

        this.initRequiredMarks();

        // 通知移动端组件重新检查必填状态
        this.notifyComponentsUpdate();

        ssVm.bindForm(".form-container");
    }

    // 验证单个字段
    validateField(field) {
        const element = document.querySelector(`[name="${field}"]`);
        if (!element) return { valid: true };

        const td = findParentTd(element);
        if (!td) return { valid: true };

        // 获取同一个 td 内的所有需要验证的字段
        const tdFields = Array.from(td.querySelectorAll('[name]'))
            .map(el => el.getAttribute('name'))
            .filter(name => this.validations.has(name));
        
        // 验证所有字段并合并错误信息
        let errors = [];
        let hasEmptyRequired = false; // 是否有空的必填字段

        for (const f of tdFields) {
            
            const element = document.querySelector(`[name="${f}"]`);
            const value = element.value;
            
            // 检查是否为空
            if (!value || value.trim() === '') {
                hasEmptyRequired = true;
            }

            const result = this._doValidate(f);
            if (!result.valid && errors.indexOf(result.message) === -1) {
               
                errors.push(result.message);
            }
        }
         // 检查是否有依赖规则
         const dependRule = this.dependRules.get(field);
         if (dependRule) {
            const { dependField, rules } = dependRule;
            const dependElement = document.querySelector(`[name="${dependField}"]`);
            if (dependElement) {
                const dependValue = dependElement.value;
                const validatorName = rules[dependValue];
                if (validatorName) {
                    // 更新验证规则
                    this.validations.set(field, [{
                        rule: window.ValidatorRules[validatorName],
                        options: {
                            msgPrfx: field,
                            required: true
                        }
                    }]);
                }
            }
        }
        // 管理必填标记
        let requiredMark = td.querySelector('.required');
        // console.log(hasEmptyRequired,errors.length,requiredMark)
        if ((hasEmptyRequired || errors.length > 0) && !requiredMark) {
            requiredMark = document.createElement('div');
            requiredMark.className = 'required';
            td.appendChild(requiredMark);
        } else if (!hasEmptyRequired && errors.length === 0 && requiredMark) {
            requiredMark.remove();
        }

        // 动态管理错误提示 - 仅PC端使用，移动端通过组件内部显示
        // 检查是否为移动端环境（通过检查是否有ss-input或ss-mobile-component组件）
        const isMobileEnv = td.querySelector('.ss-input') !== null || td.querySelector('.ss-mobile-component') !== null;

        if (!isMobileEnv) {
            // PC端：使用.err-tip元素显示错误
            let errTip = td.querySelector('.err-tip');
            if (!errTip && errors.length > 0) {
                errTip = document.createElement('div');
                errTip.className = 'err-tip';
                errTip.style.position = 'absolute';
                errTip.style.zIndex = '1';
                errTip.innerHTML = `
                    <div class="tip">${errors.join('；')}</div>
                    <div class="tip-more">${errors.join('；')}</div>
                `;
                td.appendChild(errTip);
            } else if (errTip && errors.length === 0) {
                errTip.remove();
            } else if (errTip && errors.length > 0) {
                errTip.querySelector('.tip').textContent = errors.join('；');
                errTip.querySelector('.tip-more').textContent = errors.join('；');
            }
        }
        // 移动端：错误提示由ss-input组件内部处理，这里不生成.err-tip元素
        
        return {
            valid: errors.length === 0,
            message: errors.join('；')
        };
    }

    // 验证所有字段
    validateAll() {
        const errors = [];
        for (const field of this.validations.keys()) {
            const result = this.validateField(field);
            if (!result.valid) {
                errors.push({
                    field: field,
                    message: result.message
                });
            }
        }
        
        return {
            valid: errors.length === 0,
            errors: errors
        };
    }

    // 解析规则名称并获取对应的验证规则
    _parseRule(ruleName) {
        const parts = ruleName.split('.');
        const actualRuleName = parts[parts.length - 1];
        return ValidatorRules[actualRuleName];
    }

    // 绑定到表单提交
    bindForm(formClass) {
        // 创建一个观察器实例
        const observer = new MutationObserver((mutations) => {
            const form = document.querySelector(formClass);
            if (form && !form._bound) {
                // console.log("Found form, binding submit event");
                
                $(form).on('submit', (e) => {
                    e.preventDefault();

                    const result = this.validateAll();
                    if (!result.valid) {
                        // 触发所有字段的校验，让移动端组件显示错误
                        result.errors.forEach(error => {
                            const element = document.querySelector(`[name="${error.field}"]`);
                            if (element) {
                                // 触发input事件，让移动端组件更新状态
                                const inputEvent = new Event('input', { bubbles: true });
                                element.dispatchEvent(inputEvent);

                                // PC端的错误提示处理
                                const validateComponent = element.closest('.input-container')?.querySelector('.err-tip');
                                if (validateComponent) {
                                    validateComponent.querySelector('.tip').textContent = error.message;
                                    validateComponent.querySelector('.tip-more').textContent = error.message;
                                }
                            }
                        });
                        return false;
                    } else {
                        alert('表单校验通过！');
                    }
                    return true;
                });

                form._bound = true;  // 标记已绑定
                observer.disconnect();  // 停止观察
            }
        });

        // 开始观察
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    }
    remove(fields) {
        // 如果传入单个字段，转换为数组
        if (!Array.isArray(fields)) {
            fields = [fields];
        }

        // 遍历字段并移除验证规则
        fields.forEach(field => {
            if (this.validations.has(field)) {
                this.validations.delete(field);
            }
        });
    }

    // 私有验证方法
    _doValidate(field) {
        const rules = this.validations.get(field);
        if (!rules) return { valid: true };

        const element = document.querySelector(`[name="${field}"]`);
        
        if (!element) return { valid: true };
        
        const value = element.value;
        // console.log(element,value)
        for (const {rule, options} of rules) {
            // console.log(rule,options)
            // 如果设置了 required 且值为空，进行必填验证
            if (options.required && (!value || value.trim() === '')) {
                return {
                    valid: false,
                    message: `${options.msgPrfx}不能为空`
                };
            }

            // 执行规则验证，传入完整的 options 以支持关联字段验证
            const isValid = rule.validate(value, options);
            if (!isValid) {
                let message = rule.message;
                message = message.replace('{field}', options.msgPrfx);
                Object.keys(options).forEach(key => {
                    message = message.replace(`{${key}}`, options[key]);
                });
                return {
                    valid: false,
                    message: message
                };
            }
        }

        return { valid: true };
    }

    // 初始化必填标记
    initRequiredMarks() {
        
        // 先收集所有需要处理的 td
        const processedTds = new Set();
        
        // 遍历所有带验证规则的字段
        for (const [field, rules] of this.validations.entries()) {
            const element = document.querySelector(`[name="${field}"]`);
            if (!element) continue;

            const td = findParentTd(element);
            if (!td || processedTds.has(td)) continue;  // 跳过已处理的 td
            
            processedTds.add(td);  // 标记该 td 已处理

            // 获取同一个 td 内的所有需要验证的字段
            const tdFields = Array.from(td.querySelectorAll('[name]'))
                .map(el => el.getAttribute('name'))
                .filter(name => this.validations.has(name));

            // 只要有验证规则就添加必填标记
            if (tdFields.length > 0) {
                let requiredMark = td.querySelector('.required');
                if (!requiredMark) {
                    requiredMark = document.createElement('div');
                    requiredMark.className = 'required';
                    td.appendChild(requiredMark);
                }
            }
        }
    }

    // 验证字段但不显示错误信息
    validateFieldSilent(field) {
        const rules = this.validations.get(field);
        if (!rules) return { valid: true };

        const element = document.querySelector(`[name="${field}"]`);
        if (!element) return { valid: true };

        const value = element.value;

        for (const {rule, options} of rules) {
            if (options.required && (!value || value.trim() === '')) {
                return { valid: false };
            }
            if (!value && !options.required) {
                return { valid: true };
            }
            const isValid = rule.validate(value, options);
            if (!isValid) {
                return { valid: false };
            }
        }

        return { valid: true };
    }

    // 检查字段是否为必填项 - 为移动端组件提供支持
    isRequired(field) {
        const rules = this.validations.get(field);
        if (!rules) return false;

        // 检查是否有任何规则设置了required或者是notNull规则
        return rules.some(({rule, options}) => {
            return options.required || rule === ValidatorRules.notNull;
        });
    }

    // 通知移动端组件更新状态
    notifyComponentsUpdate() {
        // 触发所有已挂载的ss-input组件重新检查状态
        const inputs = document.querySelectorAll('input[name]');
        inputs.forEach(input => {
            // 触发一个自定义事件，让组件重新检查必填状态
            const event = new CustomEvent('ssvm-rules-updated', {
                bubbles: true,
                detail: { fieldName: input.getAttribute('name') }
            });
            input.dispatchEvent(event);
        });
    }
}



 // 创建全局实例
 window.ssVm = window.ssVm || new ValidationManager(); 
 // 在 DOM 加载完成后初始化必填标记