@kupola/kupola 1.2.0 → 1.4.0

package/js/form.js

@@ -1,291 +1,317 @@
-(function(window) {
-    class KupolaForm {
-        constructor(formOrSelector, options = {}) {
-            this.form = typeof formOrSelector === 'string'
-                ? document.querySelector(formOrSelector)
-                : formOrSelector;
-            
-            this.options = {
-                validateOnSubmit: true,
-                validateOnChange: false,
-                validateOnBlur: false,
-                preventDefault: true,
-                ...options
-            };
-
-            this.submitHandlers = [];
-            this.isSubmitting = false;
-            this.errors = {};
-            this.rules = {};
-            this.validator = window.kupolaValidator || new window.KupolaValidator();
-
-            if (!this.form || !(this.form instanceof HTMLFormElement)) {
-                console.warn('[KupolaForm] Invalid form element');
-                return;
-            }
-
-            this._init();
-        }
-
-        _init() {
-            if (this.options.validateOnChange) {
-                this.form.addEventListener('input', (e) => {
-                    this._validateField(e.target);
-                });
-            }
+class KupolaForm {
+    constructor(formElement) {
+        this.form = formElement;
+        this.fields = [];
+        this.validators = {};
+        this.errorMessages = {};
+        this._init();
+    }
 
-            if (this.options.validateOnBlur) {
-                this.form.addEventListener('blur', (e) => {
-                    if (e.target.form === this.form) {
-                        this._validateField(e.target);
-                    }
-                }, true);
-            }
-        }
+    _init() {
+        this._setupValidators();
+        this._collectFields();
+        this._bindEvents();
+    }
 
-        submit(handler) {
-            const wrappedHandler = async (e) => {
-                if (this.options.preventDefault) {
-                    e.preventDefault();
+    _setupValidators() {
+        this.validators = {
+            required: (value) => {
+                if (typeof value === 'string') {
+                    return value.trim() !== '';
                 }
-                if (this.isSubmitting) return;
-                this.isSubmitting = true;
-
-                try {
-                    if (this.options.validateOnSubmit) {
-                        const validation = await this.validate();
-                        if (!validation.valid) {
-                            this._showErrors(validation.errors);
-                            return;
-                        }
-                    }
-
-                    const result = handler(e);
-                    if (result instanceof Promise) {
-                        await result;
-                    }
-                } finally {
-                    this.isSubmitting = false;
+                if (Array.isArray(value)) {
+                    return value.length > 0;
                 }
-            };
-
-            this.submitHandlers.push(wrappedHandler);
-            this.form.addEventListener('submit', wrappedHandler);
-
-            return () => {
-                const index = this.submitHandlers.indexOf(wrappedHandler);
-                if (index > -1) {
-                    this.submitHandlers.splice(index, 1);
-                    this.form.removeEventListener('submit', wrappedHandler);
+                return value !== null && value !== undefined;
+            },
+            email: (value) => {
+                if (!value) return true;
+                const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                return regex.test(value);
+            },
+            phone: (value) => {
+                if (!value) return true;
+                const regex = /^1[3-9]\d{9}$/;
+                return regex.test(value);
+            },
+            url: (value) => {
+                if (!value) return true;
+                try {
+                    new URL(value);
+                    return true;
+                } catch {
+                    return false;
                 }
-            };
-        }
-
-        setRules(rules) {
-            this.rules = { ...this.rules, ...rules };
-            this._applyRulesToDOM();
-            return this;
-        }
-
-        _applyRulesToDOM() {
-            Object.keys(this.rules).forEach(name => {
-                const input = this.form.querySelector(`[name="${name}"]`);
-                if (!input) return;
-
-                const fieldRules = this.rules[name];
-                const ruleString = this._rulesToString(fieldRules);
-                input.setAttribute('data-validate', ruleString);
-            });
-        }
-
-        _rulesToString(rules) {
-            if (typeof rules === 'function') {
-                return 'custom';
+            },
+            number: (value) => {
+                if (!value) return true;
+                return !isNaN(parseFloat(value)) && isFinite(value);
+            },
+            minlength: (value, min) => {
+                if (!value) return true;
+                return value.length >= parseInt(min);
+            },
+            maxlength: (value, max) => {
+                if (!value) return true;
+                return value.length <= parseInt(max);
+            },
+            min: (value, min) => {
+                if (!value) return true;
+                return parseFloat(value) >= parseFloat(min);
+            },
+            max: (value, max) => {
+                if (!value) return true;
+                return parseFloat(value) <= parseFloat(max);
+            },
+            pattern: (value, pattern) => {
+                if (!value) return true;
+                const regex = new RegExp(pattern);
+                return regex.test(value);
+            },
+            equalTo: (value, targetId) => {
+                const target = document.getElementById(targetId);
+                if (!target) return true;
+                return value === target.value;
             }
+        };
+
+        this.errorMessages = {
+            required: '该字段为必填项',
+            email: '请输入有效的邮箱地址',
+            phone: '请输入有效的手机号码',
+            url: '请输入有效的URL地址',
+            number: '请输入有效的数字',
+            minlength: (param) => `至少需要${param}个字符`,
+            maxlength: (param) => `最多允许${param}个字符`,
+            min: (param) => `最小值为${param}`,
+            max: (param) => `最大值为${param}`,
+            pattern: '格式不正确',
+            equalTo: '两次输入不一致'
+        };
+    }
 
-            const parts = [];
-            Object.keys(rules).forEach(rule => {
-                const config = rules[rule];
-                if (typeof config === 'object' && config !== null) {
-                    if (rule === 'pattern') {
-                        parts.push(`pattern:${config.source?.replace(/\//g, '')}`);
-                    } else if (rule === 'equalTo') {
-                        parts.push(`equalTo:${config}`);
-                    } else {
-                        parts.push(rule);
-                    }
-                } else if (typeof config === 'number' || typeof config === 'string') {
-                    parts.push(`${rule}:${config}`);
-                } else if (config === true) {
-                    parts.push(rule);
-                }
-            });
-            return parts.join('|');
-        }
-
-        async validate(fields = null) {
-            this.errors = {};
-            const allErrors = [];
+    _collectFields() {
+        const inputs = this.form.querySelectorAll('input, select, textarea');
+        inputs.forEach(input => {
+            if (!input.hasAttribute('data-kupola-ignore')) {
+                this.fields.push(input);
+            }
+        });
+    }
 
-            const inputs = fields
-                ? Array.isArray(fields) ? fields : [fields]
-                : this.form.querySelectorAll('input, select, textarea');
+    _bindEvents() {
+        this.form.addEventListener('submit', (e) => {
+            if (!this.validate()) {
+                e.preventDefault();
+            }
+        });
 
-            for (const input of inputs) {
-                const name = input.name;
-                if (!name) continue;
+        this.fields.forEach(field => {
+            field.addEventListener('blur', () => this.validateField(field));
+            field.addEventListener('input', () => this.clearError(field));
+        });
+    }
 
-                const errors = await this._validateField(input);
-                if (errors.length > 0) {
-                    this.errors[name] = errors;
-                    allErrors.push(...errors);
-                }
+    validate() {
+        let isValid = true;
+        this.fields.forEach(field => {
+            if (!this.validateField(field)) {
+                isValid = false;
             }
+        });
+        return isValid;
+    }
 
-            return {
-                valid: allErrors.length === 0,
-                errors: allErrors,
-                fieldErrors: this.errors
-            };
+    validateField(field) {
+        const errors = this._getFieldErrors(field);
+        
+        if (errors.length > 0) {
+            this.showError(field, errors[0]);
+            return false;
         }
+        
+        this.clearError(field);
+        return true;
+    }
 
-        async _validateField(input) {
-            const name = input.name;
-            const rules = this.rules[name];
-
-            if (typeof rules === 'function') {
-                const result = rules(input.value.trim(), input);
-                if (result instanceof Promise) {
-                    const asyncResult = await result;
-                    if (asyncResult !== true) {
-                        const displayName = input.getAttribute('data-label') || input.getAttribute('placeholder') || name;
-                        const message = typeof asyncResult === 'string' ? asyncResult : `${displayName} 验证失败`;
-                        this.validator.showError(input, message);
-                        return [message];
+    _getFieldErrors(field) {
+        const errors = [];
+        const value = this._getFieldValue(field);
+        
+        for (const [validatorName, validator] of Object.entries(this.validators)) {
+            const attrValue = field.getAttribute(`data-${validatorName}`);
+            if (attrValue !== null) {
+                const isValid = validator(value, attrValue);
+                if (!isValid) {
+                    let message = this.errorMessages[validatorName];
+                    if (typeof message === 'function') {
+                        message = message(attrValue);
                     }
-                } else if (result !== true) {
-                    const displayName = input.getAttribute('data-label') || input.getAttribute('placeholder') || name;
-                    const message = typeof result === 'string' ? result : `${displayName} 验证失败`;
-                    this.validator.showError(input, message);
-                    return [message];
+                    errors.push(message);
                 }
-                this.validator.clearError(input);
-                return [];
-            }
-
-            const isValid = await this.validator.validateInputAsync(input);
-            if (!isValid) {
-                const errorElement = input.parentElement?.querySelector('.ds-input__error');
-                return errorElement ? [errorElement.textContent] : ['Validation failed'];
             }
-            return [];
         }
+        
+        return errors;
+    }
 
-        _showErrors(errors) {
-            if (typeof Message !== 'undefined') {
-                Message.error(errors.join('\n'));
-            } else if (typeof console !== 'undefined') {
-                console.error('Form validation errors:', errors);
-            }
+    _getFieldValue(field) {
+        const type = field.type;
+        
+        if (type === 'checkbox') {
+            return field.checked;
         }
-
-        getValues() {
-            const values = {};
-            const inputs = this.form.querySelectorAll('input, select, textarea');
-
-            inputs.forEach(input => {
-                const name = input.name;
-                if (!name) return;
-
-                if (input.type === 'checkbox') {
-                    if (!values[name]) {
-                        values[name] = [];
-                    }
-                    if (input.checked) {
-                        values[name].push(input.value);
-                    }
-                } else if (input.type === 'radio') {
-                    if (input.checked) {
-                        values[name] = input.value;
-                    }
-                } else if (input.type === 'file') {
-                    values[name] = input.files;
-                } else {
-                    values[name] = input.value;
-                }
-            });
-
-            return values;
+        
+        if (type === 'radio') {
+            const name = field.name;
+            const checked = this.form.querySelector(`input[name="${name}"]:checked`);
+            return checked ? checked.value : null;
         }
-
-        setValues(values) {
-            Object.keys(values).forEach(key => {
-                const input = this.form.querySelector(`[name="${key}"]`);
-                if (!input) return;
-
-                if (input.type === 'checkbox') {
-                    const valuesArray = Array.isArray(values[key]) ? values[key] : [values[key]];
-                    input.checked = valuesArray.includes(input.value);
-                } else if (input.type === 'radio') {
-                    const radio = this.form.querySelector(`[name="${key}"][value="${values[key]}"]`);
-                    if (radio) radio.checked = true;
-                } else if (input.type === 'file') {
-                    const dataTransfer = new DataTransfer();
-                    if (values[key] instanceof FileList) {
-                        Array.from(values[key]).forEach(file => {
-                            dataTransfer.items.add(file);
-                        });
-                    }
-                    input.files = dataTransfer.files;
-                } else {
-                    input.value = values[key];
-                }
-            });
-            return this;
+        
+        if (type === 'select-multiple') {
+            return Array.from(field.selectedOptions).map(option => option.value);
         }
+        
+        return field.value;
+    }
 
-        reset() {
-            this.form.reset();
-            this.errors = {};
-            this.validator.resetForm(this.form);
-            return this;
+    showError(field, message) {
+        this.clearError(field);
+        
+        const errorElement = document.createElement('span');
+        errorElement.className = 'ds-form-error';
+        errorElement.textContent = message;
+        
+        field.classList.add('ds-form-field--error');
+        
+        const container = field.parentElement;
+        if (container.classList.contains('ds-form-field')) {
+            container.appendChild(errorElement);
+        } else {
+            field.parentNode.insertBefore(errorElement, field.nextSibling);
         }
+    }
 
-        clearErrors() {
-            this.errors = {};
-            this.form.querySelectorAll('.ds-input--error').forEach(input => {
-                this.validator.clearError(input);
-            });
-            return this;
+    clearError(field) {
+        field.classList.remove('ds-form-field--error');
+        
+        const errorElement = field.parentElement.querySelector('.ds-form-error');
+        if (errorElement) {
+            errorElement.remove();
         }
+    }
 
-        getError(fieldName) {
-            return this.errors[fieldName] || [];
-        }
+    addValidator(name, validator, message) {
+        this.validators[name] = validator;
+        this.errorMessages[name] = message;
+    }
 
-        hasError(fieldName) {
-            return this.errors[fieldName] && this.errors[fieldName].length > 0;
-        }
+    getData() {
+        const data = {};
+        
+        this.fields.forEach(field => {
+            const name = field.name;
+            if (!name) return;
+            
+            const value = this._getFieldValue(field);
+            
+            if (field.type === 'checkbox') {
+                if (!data[name]) {
+                    data[name] = [];
+                }
+                if (field.checked) {
+                    data[name].push(field.value);
+                }
+            } else if (field.type === 'radio') {
+                if (!data[name] && field.checked) {
+                    data[name] = field.value;
+                }
+            } else {
+                data[name] = value;
+            }
+        });
+        
+        return data;
+    }
 
-        destroy() {
-            this.submitHandlers.forEach(handler => {
-                this.form.removeEventListener('submit', handler);
+    setData(data) {
+        Object.keys(data).forEach(name => {
+            const fields = this.form.querySelectorAll(`[name="${name}"]`);
+            
+            fields.forEach(field => {
+                const type = field.type;
+                
+                if (type === 'checkbox') {
+                    const values = Array.isArray(data[name]) ? data[name] : [data[name]];
+                    field.checked = values.includes(field.value);
+                } else if (type === 'radio') {
+                    field.checked = field.value === data[name];
+                } else if (type === 'select-multiple') {
+                    const values = Array.isArray(data[name]) ? data[name] : [data[name]];
+                    Array.from(field.options).forEach(option => {
+                        option.selected = values.includes(option.value);
+                    });
+                } else {
+                    field.value = data[name] || '';
+                }
             });
-            this.submitHandlers = [];
-            this.errors = {};
-            this.rules = {};
-        }
+        });
     }
 
-    function useForm(formOrSelector, options = {}) {
-        return new KupolaForm(formOrSelector, options);
+    reset() {
+        this.form.reset();
+        this.fields.forEach(field => this.clearError(field));
     }
 
-    function createForm(formOrSelector, options = {}) {
-        return new KupolaForm(formOrSelector, options);
+    destroy() {
+        this.fields.forEach(field => {
+            field.removeEventListener('blur', () => this.validateField(field));
+            field.removeEventListener('input', () => this.clearError(field));
+        });
+        
+        this.form.removeEventListener('submit', () => {});
+        
+        this.fields = null;
+        this.validators = null;
+        this.errorMessages = null;
+        this.form = null;
+    }
+}
+
+function initFormValidation(formSelector) {
+    const forms = document.querySelectorAll(formSelector || '.ds-form');
+    
+    forms.forEach(form => {
+        if (form._kupolaForm) return;
+        
+        const instance = new KupolaForm(form);
+        form._kupolaForm = instance;
+    });
+    
+    return forms.length;
+}
+
+function getFormInstance(formElement) {
+    return formElement._kupolaForm;
+}
+
+function validateForm(formElement) {
+    const instance = formElement._kupolaForm;
+    if (instance) {
+        return instance.validate();
     }
+    return false;
+}
 
+export { KupolaForm, initFormValidation, getFormInstance, validateForm };
+
+if (typeof window !== 'undefined') {
     window.KupolaForm = KupolaForm;
-    window.useForm = useForm;
-    window.createForm = createForm;
-})(window);
+    window.initFormValidation = initFormValidation;
+    window.getFormInstance = getFormInstance;
+    window.validateForm = validateForm;
+    
+    if (window.kupolaInitializer) {
+        window.kupolaInitializer.register('form-validation', initFormValidation);
+    }
+}