URL 검증 또는: 걱정을 멈추고 사용자를 사랑하는 법을 배운 방법

모든 웹 개발자에게는 일종의 입력 유효성 검사를 수행해야 할 때가 있습니다. 양식은 사용자가 이메일 필드에서 Yahoo Mail에 대한 사랑을 시적으로 표현하는 블로그 게시물이 아닙니다. 결국에는 단어 수 제한, 특정 문자 확인, 사용자가 정크 POST 요청을 보내지 못하도록 하는 간단한 유효성 검사 기술이 필요합니다.

그러나 URL의 유효성을 검사해야 하는 경우에는 어떻게 해야 합니까? 그리고 문제에 또 다른 계층을 추가하려면 경로나 프로토콜 없이 URL의 호스트 이름만 원하고 "dubya dubya dubya dot"(www.) 및 .com만 원하는 경우에는 어떻게 해야 할까요?

URL이 URL인지 아는 것부터 시작해 보겠습니다. 링크에는 두 번째 및 최상위 도메인인 walmart.com의 walmart와 .com, 그리고 구성표(https://)가 필요합니다. 이러한 부분이 없으면 링크는 어떤 것과도 연결되지 않으며 한 줄의 텍스트와 다르지 않습니다.

그러나 이제 URL의 일부를 알았으므로 분기점 또는 개발 경로에 도달합니다. 유효성 검사를 통해 현장에서 사용자를 제한해야 할까요, 아니면 데이터가 서버로 전송될 때 사용자 입력을 삭제해야 할까요?

두 옵션 모두 장점과 단점이 있습니다.

---

제출 전 검증

사용자가 잘못된 URL을 제출하지 못하도록 제한하면 사용자가 필요한 정확한 입력 구조를 제출하도록 강제하여 추가 작업 없이 쉽게 서버 측에서 데이터를 가져올 수 있습니다. 이 경우 일부 정규식과 결합된 입력 요소의 패턴 속성을 사용하면 좋은 구식 필드 유효성 검사가 가능합니다.

이러한 접근 방식의 예는 다음과 같습니다.

<input type="text" pattern="https?://.*"

단, 사용자를 제한한다는 단점이 있습니다. 사용자가 입력할 특정 부분이 있어야 하며 .com만 필요한 경우 긴 정규식 패턴이 과도할 수 있습니다.

---

제출 후 유효성

반면에 사용자가 데이터를 제출한 후 데이터를 삭제하도록 선택하면 사용자는 무엇이든 입력할 수 있으며 서버는 데이터로 무엇을 할지 결정할 수 있습니다. Javascript의 URL 생성자는 입력이 유효하지 않은 경우 TypeError를 반환하고 원본이나 호스트 이름과 같은 URL의 특정 부분을 추출할 수 있도록 유효성 검사를 수행합니다.

이러한 접근 방식의 예는 다음과 같습니다.

export const formatWebsiteAfterDomain = (website: string): string => {
  if (!website.trim().length) {
    return '';
  }
  const regEx = /:\/\//;
  const websiteTrimmed = website.trim();
  const hasProtocol = regEx.exec(websiteTrimmed);
  const updatedWebsite = hasProtocol
    ? websiteTrimmed
    : `https://${websiteTrimmed}`;

  try {
    const url = new URL(updatedWebsite);
    return hasProtocol ? url.origin : url.origin.replace('https://', '');
  } catch (_err) {
    return websiteTrimmed;
  }
};

그러나 사용자에게 입력의 자유를 너무 많이 주기 때문에 서버가 데이터를 처리하는 작업에 있어서 어느 정도 절충이 필요합니다. 사용자가 잘못된 URL을 입력한 경우 어떻게 해야 합니까? TypeError 응답을 사용하여 사용자에게 알리나요? 아니면 사용자가 보낸 내용을 서버가 사용하도록 허용합니까? 또한 URL 생성자는 구성표(https:// 또는 http://)가 있는지 확인하여 입력의 유효성을 검사합니다. 이는 사용자의 용도에 비해 유효성 검사가 너무 적을 수 있습니다.

---

결국, 취하는 경로는 문제의 구체적인 극단적인 경우에 따라 달라집니다. 두 솔루션의 조합이 가장 포괄적이고 다재다능할 수도 있고, 둘 중 하나만 선택해도 충분할 수도 있습니다. 사용자는 어떤 입력이든 입력할 수 있으며 사용자에게 제공하려는 자유도에 따라 솔루션이 결정됩니다. 그러나 여전히 보편적인 것은 사용자가 무엇이든 입력할 수 있는 능력이 항상 사용자와 개발자를 일종의 타협에 이르게 한다는 것입니다(흔히 개발자가 특정 입력 패턴을 얻고 사용자가 자신의 응용 프로그램을 사용하게 되는 경우가 많습니다).

그러나 사용자 입력의 특성은 영원하기 때문에 사용자가 양식의 URL 필드에 이미지를 붙여넣으려고 할 때 웹 앱이 중단되지 않도록 솔루션을 필사적으로 밀어붙이는 개발자가 항상 있을 것입니다.

위 내용은 URL 검증 또는: 걱정을 멈추고 사용자를 사랑하는 법을 배운 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!