vanilla-jui 1.4.8 → 1.5.2

package/src/validation/validator.ts

@@ -1,7 +1,7 @@
 import { jsx } from 'vanilla-signal';
 
 import { type DOMReference, all, resolveElement } from '../utilities/dom.ts';
-import { type IEventManager, createEventManager } from '../utilities/events.ts';
+import { createEventManager } from '../utilities/events.ts';
 import {
   type ResolveSchema,
   resolveProps,
@@ -53,26 +53,18 @@ interface ResolvedValidatorProps extends Record<string, unknown> {
   onSubmit: ((validator: ValidatorInstance) => void) | null;
 }
 
-interface ValidatorDOM {
-  root: HTMLFormElement | null;
-}
-
 interface ValidatorRuntime {
   valid: boolean;
   message: string;
   destroyed: boolean;
 }
 
-interface ValidatorCleanup {
-  events: IEventManager;
-}
-
 interface ResetOptions {
   native?: boolean;
 }
 
-interface ValidatorInstance {
-  dom: ValidatorDOM;
+export interface ValidatorInstance {
+  readonly element: HTMLFormElement | null;
   props: ResolvedValidatorProps | null;
   runtime: ValidatorRuntime;
   validate(): boolean;
@@ -146,462 +138,370 @@ function hasFiles(element: HTMLInputElement): element is HTMLInputElement & {
   return !!element.files && element.files.length > 0;
 }
 
-/**
- * 表单校验组件。
- *
- * 支持绑定表单 submit/reset 事件，也可以手动调用 validate/reset。
- */
-class Validator implements ValidatorInstance {
-  dom: ValidatorDOM;
-  props: ResolvedValidatorProps | null;
-  runtime: ValidatorRuntime;
-  cleanup: ValidatorCleanup | null;
+function validateRequired(
+  element: ValidatorElement,
+  required: unknown
+): boolean {
+  if (required !== true) return true;
+  if (element instanceof HTMLSelectElement) {
+    return selectedValues(element).some((value) => value.length > 0);
+  }
+  return element.value.trim().length >= 1;
+}
 
-  constructor(
-    element: DOMReference,
-    props: ValidatorProps = {},
-    bindEvents = false
-  ) {
-    this.props = normalizeProps(props);
-    this.dom = {
-      root: this.resolveRoot(element),
-    };
-    this.runtime = createRuntime();
-    this.cleanup = {
-      events: createEventManager(),
-    };
-
-    this.validateOptions(bindEvents);
-
-    if (bindEvents) {
-      this.bindEvents();
-    }
+function validateMinLength(
+  element: ValidatorElement,
+  minLength: unknown
+): boolean {
+  if (typeof minLength !== 'number') return true;
+  return element.value.length >= minLength;
+}
+
+function validateMaxLength(
+  element: ValidatorElement,
+  maxLength: unknown
+): boolean {
+  if (typeof maxLength !== 'number') return true;
+  return element.value.length <= maxLength;
+}
+
+function validateEmail(element: ValidatorElement): boolean {
+  const emailPattern = /^([\w-.]+@([\w-]+\.)+[\w-]{2,4})?$/;
+  return emailPattern.test(element.value);
+}
+
+function validateEqualTo(
+  root: HTMLFormElement | null,
+  element: ValidatorElement,
+  targetName: unknown
+): boolean {
+  if (!root || typeof targetName !== 'string') return true;
+  const targetElement = toValidatorElement(root.elements.namedItem(targetName));
+  if (!targetElement) {
+    throw new Error(`Validator: target element "${targetName}" not found.`);
   }
+  return element.value === targetElement.value;
+}
 
-  private resolveRoot(element: DOMReference): HTMLFormElement {
-    const root = resolveElement(element);
-    if (!(root instanceof HTMLFormElement)) {
-      throw new Error('Validator.element expects a form element.');
-    }
-    return root;
+function validateCheck(element: ValidatorElement, checked: unknown): boolean {
+  if (!(element instanceof HTMLInputElement) || element.type !== 'checkbox') {
+    throw new Error(
+      `Validator: element expects a checkbox input, but ${element.tagName.toLowerCase()} given.`
+    );
   }
+  return element.checked === checked;
+}
 
-  private validateOptions(bindEvents: boolean): void {
-    validateParam('bindEvents', bindEvents, 'boolean', 'Validator');
+function validateSelected(
+  element: ValidatorElement,
+  selected: unknown
+): boolean {
+  if (!(element instanceof HTMLSelectElement)) {
+    throw new Error(
+      `Validator: element expects a select element, but ${element.tagName.toLowerCase()} given.`
+    );
   }
+  if (selected !== true) return true;
+  return selectedValues(element).some((value) => value.length > 0);
+}
 
-  private bindEvents(): void {
-    this.unbindEvents();
-    const { root } = this.dom;
-    if (!root || !this.cleanup) return;
+function validateMultiple(
+  element: ValidatorElement,
+  multiple: unknown
+): boolean {
+  if (!(element instanceof HTMLSelectElement)) {
+    throw new Error(
+      `Validator: element expects a select element, but ${element.tagName.toLowerCase()} given.`
+    );
+  }
+  if (multiple !== true) return true;
+  return element.selectedOptions.length > 0;
+}
 
-    this.cleanup.events.on('submit', root, 'submit', (event) => {
-      event.preventDefault();
-      this.validate();
-    });
-    this.cleanup.events.on('reset', root, 'reset', () => {
-      this.reset({ native: false });
-    });
+function validateSelectMin(element: ValidatorElement, min: unknown): boolean {
+  if (!(element instanceof HTMLSelectElement) || typeof min !== 'number') {
+    return true;
   }
+  return element.selectedOptions.length >= min;
+}
 
-  private unbindEvents(): void {
-    this.cleanup?.events.clear();
+function validateSelectMax(element: ValidatorElement, max: unknown): boolean {
+  if (!(element instanceof HTMLSelectElement) || typeof max !== 'number') {
+    return true;
   }
+  return element.selectedOptions.length <= max;
+}
 
-  /**
-   * 执行表单校验。
-   */
-  validate(): boolean {
-    const { root } = this.dom;
-    if (!root || !this.props) return false;
+function validateNoSpace(element: ValidatorElement, noSpace: unknown): boolean {
+  return !/\s/.test(element.value) || noSpace !== true;
+}
 
-    this.runtime.valid = true;
-    this.runtime.message = '';
+function validatePattern(element: ValidatorElement, pattern: unknown): boolean {
+  if (!(typeof pattern === 'string' || pattern instanceof RegExp)) return true;
+  return new RegExp(pattern).test(element.value);
+}
 
-    for (const element of Array.from(root.elements)) {
-      if (!isValidatorElement(element) || !element.name) continue;
-      if (!this.props.rules[element.name]) continue;
+function validateFile(element: ValidatorElement, required: unknown): boolean {
+  if (!isFileInput(element)) return true;
+  return required === true ? hasFiles(element) : true;
+}
 
-      this.runtime.valid = this.validateRule(element, element.name);
-      if (!this.runtime.valid) break;
-    }
+function validateMinSize(element: ValidatorElement, minSize: unknown): boolean {
+  if (
+    !isFileInput(element) ||
+    !hasFiles(element) ||
+    typeof minSize !== 'number'
+  ) {
+    return true;
+  }
+  return element.files[0].size >= minSize;
+}
 
-    if (this.runtime.valid && this.props.onSubmit) {
-      this.props.onSubmit(this);
+function validateMaxSize(element: ValidatorElement, maxSize: unknown): boolean {
+  if (
+    !isFileInput(element) ||
+    !hasFiles(element) ||
+    typeof maxSize !== 'number'
+  ) {
+    return true;
+  }
+  return element.files[0].size <= maxSize;
+}
+
+function validateAccept(element: ValidatorElement, accept: unknown): boolean {
+  if (
+    !isFileInput(element) ||
+    !hasFiles(element) ||
+    typeof accept !== 'string'
+  ) {
+    return true;
+  }
+
+  const file = element.files[0];
+  const allowed = accept.split(',').map((item) => item.trim().toLowerCase());
+
+  return allowed.some((rule) => {
+    if (rule.startsWith('.')) {
+      return file.name.toLowerCase().endsWith(rule);
+    }
+    if (rule.endsWith('/*')) {
+      return file.type.startsWith(rule.replace('/*', '/'));
     }
-    return this.runtime.valid;
+    return file.type === rule;
+  });
+}
+
+function showError(
+  props: ResolvedValidatorProps | null,
+  runtime: ValidatorRuntime,
+  element: ValidatorElement,
+  name: string,
+  rule: string,
+  customMessage = ''
+): void {
+  if (!(element instanceof HTMLInputElement) || element.type !== 'checkbox') {
+    element.classList.remove('is-valid');
+    element.classList.add('is-invalid');
   }
 
-  private validateRule(element: ValidatorElement, name: string): boolean {
-    if (!this.props) return false;
-    const rules = this.props.rules[name];
-    if (!rules) return true;
+  const error = customMessage || props?.messages[name]?.[rule] || '';
+  if (!error) return;
+
+  runtime.message = error;
 
-    if (this.hasNativeValidationRule(element)) {
-      return this.runtime.valid;
+  const formControl = getControlContainer(element);
+  if (!formControl) return;
+
+  let help =
+    all<HTMLElement>('[data-validator-help]', formControl).find(
+      (element) => element.dataset.validatorHelp === name
+    ) || null;
+  if (!help) {
+    help = jsx('div', {
+      className: 'help-block is-invalid',
+      'data-validator-help': name,
+    }) as HTMLElement;
+    formControl.appendChild(help);
+  }
+  help.textContent = error;
+}
+
+function showSuccess(element: ValidatorElement): void {
+  const formControl = getControlContainer(element);
+  if (formControl) {
+    for (const help of all<HTMLElement>('[data-validator-help]', formControl)) {
+      if (help.dataset.validatorHelp === element.name) help.remove();
     }
+  }
+
+  if (!(element instanceof HTMLInputElement) || element.type !== 'checkbox') {
+    element.classList.remove('is-invalid');
+    element.classList.add('is-valid');
+  }
+}
+
+export function createValidator(
+  element: DOMReference,
+  props: ValidatorProps = {},
+  bindEvents = false
+): ValidatorInstance {
+  validateParam('bindEvents', bindEvents, 'boolean', 'Validator');
+  const resolved = resolveElement(element);
+  if (!(resolved instanceof HTMLFormElement)) {
+    throw new Error('Validator.element expects a form element.');
+  }
+
+  let root: HTMLFormElement | null = resolved;
+  let options: ResolvedValidatorProps | null = normalizeProps(props);
+  const runtime = createRuntime();
+  const events = createEventManager();
+  let validator: ValidatorInstance;
+
+  const validateCustom = (
+    control: ValidatorElement,
+    rule: unknown
+  ): ValidatorCustomResult => {
+    if (typeof rule !== 'function') return true;
+    const result = (rule as ValidatorCustomRule)(control, validator);
+    return typeof result === 'string' ? result : !!result;
+  };
+  const validateRule = (control: ValidatorElement, name: string): boolean => {
+    const rules = options?.rules[name];
+    if (!rules) return true;
 
     for (const rule of Object.keys(rules)) {
       const value = rules[rule];
       let customMessage = '';
-
       switch (rule) {
         case 'required':
-          this.runtime.valid = this.validateRequired(element, value);
+          runtime.valid = validateRequired(control, value);
           break;
         case 'minLength':
-          this.runtime.valid = this.validateMinLength(element, value);
+          runtime.valid = validateMinLength(control, value);
           break;
         case 'maxLength':
-          this.runtime.valid = this.validateMaxLength(element, value);
+          runtime.valid = validateMaxLength(control, value);
           break;
         case 'equalTo':
-          this.runtime.valid = this.validateEqualTo(element, value);
+          runtime.valid = validateEqualTo(root, control, value);
           break;
         case 'email':
-          this.runtime.valid = this.validateEmail(element);
+          runtime.valid = validateEmail(control);
           break;
         case 'checked':
-          this.runtime.valid = this.validateCheck(element, value);
+          runtime.valid = validateCheck(control, value);
           break;
         case 'selected':
-          this.runtime.valid = this.validateSelected(element, value);
+          runtime.valid = validateSelected(control, value);
           break;
         case 'multiple':
-          this.runtime.valid = this.validateMultiple(element, value);
+          runtime.valid = validateMultiple(control, value);
           break;
         case 'min':
-          this.runtime.valid = this.validateSelectMin(element, value);
+          runtime.valid = validateSelectMin(control, value);
           break;
         case 'max':
-          this.runtime.valid = this.validateSelectMax(element, value);
+          runtime.valid = validateSelectMax(control, value);
           break;
         case 'noSpace':
-          this.runtime.valid = this.validateNoSpace(element, value);
+          runtime.valid = validateNoSpace(control, value);
           break;
         case 'noChinese':
-          this.runtime.valid = !/[\u4e00-\u9fa5]/.test(element.value);
+          runtime.valid = !/[\u4e00-\u9fa5]/.test(control.value);
           break;
         case 'noSpecial':
-          this.runtime.valid = !/[@#$%^&*]+/g.test(element.value);
+          runtime.valid = !/[@#$%^&*]+/g.test(control.value);
           break;
         case 'pattern':
-          this.runtime.valid = this.validatePattern(element, value);
+          runtime.valid = validatePattern(control, value);
           break;
         case 'file':
-          this.runtime.valid = this.validateFile(element, value);
+          runtime.valid = validateFile(control, value);
           break;
         case 'minSize':
-          this.runtime.valid = this.validateMinSize(element, value);
+          runtime.valid = validateMinSize(control, value);
           break;
         case 'maxSize':
-          this.runtime.valid = this.validateMaxSize(element, value);
+          runtime.valid = validateMaxSize(control, value);
           break;
         case 'accept':
-          this.runtime.valid = this.validateAccept(element, value);
+          runtime.valid = validateAccept(control, value);
           break;
         case 'validate': {
-          const result = this.validateCustom(element, value);
-          this.runtime.valid = result === true;
+          const result = validateCustom(control, value);
+          runtime.valid = result === true;
           customMessage = typeof result === 'string' ? result : '';
           break;
         }
       }
-
-      if (!this.runtime.valid) {
-        this.showError(element, name, rule, customMessage);
+      if (!runtime.valid) {
+        showError(options, runtime, control, name, rule, customMessage);
         break;
       }
-
-      this.showSuccess(element);
-    }
-
-    return this.runtime.valid;
-  }
-
-  private hasNativeValidationRule(element: ValidatorElement): boolean {
-    return (
-      element.hasAttribute('required') ||
-      element.hasAttribute('minlength') ||
-      element.hasAttribute('maxlength') ||
-      element.hasAttribute('pattern') ||
-      element.hasAttribute('min') ||
-      element.hasAttribute('max') ||
-      element.hasAttribute('step')
-    );
-  }
-
-  private validateRequired(
-    element: ValidatorElement,
-    required: unknown
-  ): boolean {
-    if (required !== true) return true;
-    if (element instanceof HTMLSelectElement) {
-      return selectedValues(element).some((value) => value.length > 0);
-    }
-    return element.value.trim().length >= 1;
-  }
-
-  private validateMinLength(
-    element: ValidatorElement,
-    minLength: unknown
-  ): boolean {
-    if (typeof minLength !== 'number') return true;
-    return element.value.length >= minLength;
-  }
-
-  private validateMaxLength(
-    element: ValidatorElement,
-    maxLength: unknown
-  ): boolean {
-    if (typeof maxLength !== 'number') return true;
-    return element.value.length <= maxLength;
-  }
-
-  private validateEmail(element: ValidatorElement): boolean {
-    const emailPattern = /^([\w-.]+@([\w-]+\.)+[\w-]{2,4})?$/;
-    return emailPattern.test(element.value);
-  }
-
-  private validateEqualTo(
-    element: ValidatorElement,
-    targetName: unknown
-  ): boolean {
-    const { root } = this.dom;
-    if (!root || typeof targetName !== 'string') return true;
-    const targetElement = toValidatorElement(
-      root.elements.namedItem(targetName)
-    );
-    if (!targetElement) {
-      throw new Error(`Validator: target element "${targetName}" not found.`);
-    }
-    return element.value === targetElement.value;
-  }
-
-  private validateCheck(element: ValidatorElement, checked: unknown): boolean {
-    if (!(element instanceof HTMLInputElement) || element.type !== 'checkbox') {
-      throw new Error(
-        `Validator: element expects a checkbox input, but ${element.tagName.toLowerCase()} given.`
-      );
-    }
-    return element.checked === checked;
-  }
-
-  private validateSelected(
-    element: ValidatorElement,
-    selected: unknown
-  ): boolean {
-    if (!(element instanceof HTMLSelectElement)) {
-      throw new Error(
-        `Validator: element expects a select element, but ${element.tagName.toLowerCase()} given.`
-      );
-    }
-    if (selected !== true) return true;
-    return selectedValues(element).some((value) => value.length > 0);
-  }
-
-  private validateMultiple(
-    element: ValidatorElement,
-    multiple: unknown
-  ): boolean {
-    if (!(element instanceof HTMLSelectElement)) {
-      throw new Error(
-        `Validator: element expects a select element, but ${element.tagName.toLowerCase()} given.`
-      );
-    }
-    if (multiple !== true) return true;
-    return element.selectedOptions.length > 0;
-  }
-
-  private validateSelectMin(element: ValidatorElement, min: unknown): boolean {
-    if (!(element instanceof HTMLSelectElement) || typeof min !== 'number') {
-      return true;
-    }
-    return element.selectedOptions.length >= min;
-  }
-
-  private validateSelectMax(element: ValidatorElement, max: unknown): boolean {
-    if (!(element instanceof HTMLSelectElement) || typeof max !== 'number') {
-      return true;
-    }
-    return element.selectedOptions.length <= max;
-  }
-
-  private validateNoSpace(
-    element: ValidatorElement,
-    noSpace: unknown
-  ): boolean {
-    return !/\s/.test(element.value) || noSpace !== true;
-  }
-
-  private validatePattern(
-    element: ValidatorElement,
-    pattern: unknown
-  ): boolean {
-    if (!(typeof pattern === 'string' || pattern instanceof RegExp))
-      return true;
-    return new RegExp(pattern).test(element.value);
-  }
-
-  private validateFile(element: ValidatorElement, required: unknown): boolean {
-    if (!isFileInput(element)) return true;
-    return required === true ? hasFiles(element) : true;
-  }
-
-  private validateMinSize(
-    element: ValidatorElement,
-    minSize: unknown
-  ): boolean {
-    if (
-      !isFileInput(element) ||
-      !hasFiles(element) ||
-      typeof minSize !== 'number'
-    ) {
-      return true;
-    }
-    return element.files[0].size >= minSize;
-  }
-
-  private validateMaxSize(
-    element: ValidatorElement,
-    maxSize: unknown
-  ): boolean {
-    if (
-      !isFileInput(element) ||
-      !hasFiles(element) ||
-      typeof maxSize !== 'number'
-    ) {
-      return true;
-    }
-    return element.files[0].size <= maxSize;
-  }
-
-  private validateAccept(element: ValidatorElement, accept: unknown): boolean {
-    if (
-      !isFileInput(element) ||
-      !hasFiles(element) ||
-      typeof accept !== 'string'
-    ) {
-      return true;
-    }
-
-    const file = element.files[0];
-    const allowed = accept.split(',').map((item) => item.trim().toLowerCase());
-
-    return allowed.some((rule) => {
-      if (rule.startsWith('.')) {
-        return file.name.toLowerCase().endsWith(rule);
-      }
-      if (rule.endsWith('/*')) {
-        return file.type.startsWith(rule.replace('/*', '/'));
-      }
-      return file.type === rule;
-    });
-  }
-
-  private validateCustom(
-    element: ValidatorElement,
-    rule: unknown
-  ): ValidatorCustomResult {
-    if (typeof rule !== 'function') return true;
-    const result = (rule as ValidatorCustomRule)(element, this);
-    return typeof result === 'string' ? result : !!result;
-  }
-
-  private showError(
-    element: ValidatorElement,
-    name: string,
-    rule: string,
-    customMessage = ''
-  ): void {
-    if (!(element instanceof HTMLInputElement) || element.type !== 'checkbox') {
-      element.classList.remove('is-valid');
-      element.classList.add('is-invalid');
-    }
-
-    const error = customMessage || this.props?.messages[name]?.[rule] || '';
-    if (!error) return;
-
-    this.runtime.message = error;
-
-    const formControl = getControlContainer(element);
-    if (!formControl) return;
-
-    let help =
-      all<HTMLElement>('[data-validator-help]', formControl).find(
-        (element) => element.dataset.validatorHelp === name
-      ) || null;
-    if (!help) {
-      help = jsx('div', {
-        className: 'help-block is-invalid',
-        'data-validator-help': name,
-      }) as HTMLElement;
-      formControl.appendChild(help);
-    }
-    help.textContent = error;
-  }
-
-  private showSuccess(element: ValidatorElement): void {
-    const formControl = getControlContainer(element);
-    if (formControl) {
-      for (const help of all<HTMLElement>(
-        '[data-validator-help]',
-        formControl
-      )) {
-        if (help.dataset.validatorHelp === element.name) help.remove();
-      }
+      showSuccess(control);
     }
-
-    if (!(element instanceof HTMLInputElement) || element.type !== 'checkbox') {
-      element.classList.remove('is-invalid');
-      element.classList.add('is-valid');
+    return runtime.valid;
+  };
+  const validate = (): boolean => {
+    if (!root || !options || runtime.destroyed) return false;
+    runtime.valid = true;
+    runtime.message = '';
+    for (const control of Array.from(root.elements)) {
+      if (!isValidatorElement(control) || !control.name) continue;
+      if (!options.rules[control.name]) continue;
+      runtime.valid = validateRule(control, control.name);
+      if (!runtime.valid) break;
     }
-  }
-
-  /**
-   * 重置表单与校验状态。
-   */
-  reset({ native = true }: ResetOptions = {}): void {
-    const { root } = this.dom;
+    if (runtime.valid) options.onSubmit?.(validator);
+    return runtime.valid;
+  };
+  const reset = ({ native = true }: ResetOptions = {}): void => {
     if (!root) return;
     if (native) root.reset();
-
-    for (const element of Array.from(root.elements)) {
-      if (!isValidatorElement(element)) continue;
-      element.classList.remove('is-valid');
-      element.classList.remove('is-invalid');
+    for (const control of Array.from(root.elements)) {
+      if (isValidatorElement(control)) {
+        control.classList.remove('is-valid', 'is-invalid');
+      }
     }
-
     for (const help of all<HTMLElement>('[data-validator-help]', root)) {
       help.remove();
     }
+    runtime.valid = true;
+    runtime.message = '';
+  };
+  const destroy = (): void => {
+    if (runtime.destroyed) return;
+    runtime.destroyed = true;
+    events.clear();
+    reset({ native: false });
+    root = null;
+    options = null;
+    runtime.valid = false;
+    runtime.message = '';
+  };
 
-    this.runtime.valid = true;
-    this.runtime.message = '';
-  }
+  validator = {
+    get element() {
+      return root;
+    },
+    get props() {
+      return options;
+    },
+    set props(value) {
+      options = value;
+    },
+    runtime,
+    validate,
+    reset,
+    destroy,
+  };
 
-  /**
-   * 销毁当前校验实例。
-   */
-  destroy(): void {
-    if (this.runtime.destroyed) return;
-    this.runtime.destroyed = true;
-
-    this.unbindEvents();
-    this.reset({ native: false });
-    this.dom.root = null;
-    this.props = null;
-    this.runtime.valid = false;
-    this.runtime.message = '';
-    this.cleanup?.events.clear();
-    this.cleanup = null;
+  if (bindEvents) {
+    events.on('submit', root, 'submit', (event) => {
+      event.preventDefault();
+      validate();
+    });
+    events.on('reset', root, 'reset', () => reset({ native: false }));
   }
-}
-
-export function createValidator(
-  element: DOMReference,
-  props: ValidatorProps = {},
-  bindEvents = false
-): ValidatorInstance {
-  return new Validator(element, props, bindEvents);
+  return validator;
 }