Vee-validate 3.0에서 URL을 검증하는 방법

Vee-validate 3.0에서 URL을 검증하는 방법

URL의 유효성을 확인하는 옵션을 찾을 수 없습니다.

vee-validate 3.0에 추가하는 방법 또는 구현 방법은 무엇입니까?

현재 vee-validate를 연장해야 할 것 같습니다.

import { ValidationObserver, ValidationProvider, localize, extend as VeeExtend } from 'vee-validate/dist/vee-validate.full';

그 다음에 뭐랄까

const urlFixRule = (value) => {
  var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
    '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
    '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
    '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
  return !!pattern.test(value);
};
VeeExtend('url', {
    validate: (val) => urlFixRule(val),
    message: i18n.t('custom_vee_validate.incorrect_url')
});

• URL을 검증하는 가장 좋은 방법은 무엇입니까?
• 왜 이렇게 유용한 기능이 제거되었습니까?

@mojtaba 답은 완전히 맞습니다.따라서 글로벌하게 이용 가능한 규칙을 추가하는 것에 대한 그의 답변을 개선할 수 있습니다.이것에 의해, 애플리케이션의 어느 장소에서도 룰을 재사용할 수 있게 됩니다.

import { extend } from "vee-validate";

extend('url', {
  validate(value: string | null | undefined): boolean {
    if (value) {
      return /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/.test(value);
    }

    return false;
  },
  message: 'This value must be a valid URL',
})

다음으로 컴포넌트에서는 다음 작업을 간단하게 수행할 수 있습니다.

<input rules="url"/>

Vee Validate에는 regex 규칙이 있습니다.대부분의 검증은 정기적인 유효기간으로 작성됩니다.확장 없이 필요한 규칙을 쉽게 만들 수 있습니다.

문서 링크

URL 검증 예:

<ValidationProvider :rules="{ regex: /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/ }" v-slot="{ errors }">
    <input type="text" v-model="value">
    <span>{{ errors[0] }}</span>
</ValidationProvider>

언급URL : https://stackoverflow.com/questions/58341824/how-to-validate-a-url-in-vee-validate-3-0