文件操作 - useForm.ts

文件: /var/www/OLD/composables/useForm.ts

编辑文件内容

import type { Ref } from 'vue';
import { toValue } from 'vue';

export const useForm = (form?: HTMLFormElement | Ref<HTMLFormElement>) => {
  if (form) {
    form = toValue(form);
  }

const validateEmail = (email: string) => {
    return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email);
  };

const validateUrl = (url: string) => {
    return /^(https?):\/\/[^\s/$.?#].[^\s]*$/.test(url);
  };

const validateInput = (
    input: HTMLInputElement,
    highlight: boolean = true
  ) => {
    let isValid = true;

if (input.dataset.required) {
      isValid = input.dataset.valid === 'true';
    } else {
      const value = input.value;
      switch (input.type) {
        case 'email': {
          if (!validateEmail(value)) {
            isValid = false;
          }
          break;
        }
        case 'url': {
          if (!validateUrl(value)) {
            isValid = false;
          }
          break;
        }
        case 'checkbox': {
          if (!input.checked) {
            isValid = false;
          }
          break;
        }
        case 'radio': {
          if (!document.querySelector(`[name="${input.name}"]:checked`)) {
            isValid = false;
          }
          break;
        }
        default: {
          if (!value) {
            isValid = false;
          }
        }
      }
      if (input.getAttribute('minlength') && value.length < input.minLength) {
        isValid = false;
      }
      if (input.getAttribute('maxlength') && value.length > input.maxLength) {
        isValid = false;
      }
      if (input.min && Number(value) < Number(input.min)) {
        isValid = false;
      }
      if (input.max && Number(value) > Number(input.max)) {
        isValid = false;
      }
    }
    if (highlight) {
      if (isValid) {
        input.closest('.form-block')?.classList.remove('not-valid');
      } else {
        if (input.type === 'radio') {
          const radios = document.querySelectorAll(`[name="${input.name}"]`);
          const lastRadio = radios[radios.length - 1];
          lastRadio.closest('.form-block')?.classList.add('not-valid');
          return;
        }
        input.closest('.form-block')?.classList.add('not-valid');
      }
    }
    return isValid;
  };

const validateForm = (
    form: HTMLElement | HTMLFormElement,
    scrollToInvalid: boolean = true,
    highlight: boolean = true
  ) => {
    if (!form) {
      return false;
    }
    let isValid = true;
    form.querySelectorAll('[required], [data-required="true"]').forEach(el => {
      const input = el as HTMLInputElement;

if (!validateInput(input, highlight)) {
        isValid = false;
      }
    });
    if (scrollToInvalid) {
      const element = form.querySelector('.not-valid');
      if (element) {
        const rect = element.getBoundingClientRect();
        const isVisible = rect.top >= 0 && rect.bottom <= window.innerHeight;

if (!isVisible) {
          element.scrollIntoView({ behavior: 'smooth' });
        }
      }
    }
    return isValid;
  };

input.addEventListener('input', validate);
      return isValid;
    });
  };

return {
    validateEmail,
    validateUrl,
    validateInput,
    validateForm,
    watchValid,
    resetInvalid,
  };
};

文件操作 - useForm.ts

文件: /var/www/OLD/composables/useForm.ts

编辑文件内容

修改文件时间

删除文件