JavaScript를 사용한 즉각적인 양식 검증

실시간 양식 검증 : 사용자 경험을 향상시키기위한 미묘한 개선

코어 포인트 :

> JavaScript는 실시간 양식 검증을 구현하는 데 사용될 수 있으며, 이는 사용자에게 입력 유효성에 대한 즉각적인 피드백을 제공하여 사용자 경험을 향상시키고 데이터 무결성을 유지하여 유효한 데이터 만 제출하도록합니다. html5 속성 및

는 유효한 입력 범위의 양식 요소를 정의하는 데 사용될 수 있습니다. 브라우저가 이러한 특성을 지원하지 않으면 해당 값이 JavaScript 호환성 포퓰리터의 기초로 사용할 수 있습니다.

속성은 필드가 유효하지 않은지를 나타내는 데 사용될 수 있습니다. 이 속성은 접근성 정보를 제공하며 유효하지 않은 필드를 시각적으로 나타내는 CSS 후크로 사용될 수 있습니다.
• javaScript 함수 pattern 필드를 테스트하고 실제 검증을 수행하여 required 속성을 ​​제어하여 필드의 상태를 나타냅니다. 이 함수는 실시간 양식 검증을 제공하기 위해
이벤트에 바인딩 될 수 있습니다.
• aria-invalid html5는 브라우저 기반 양식 검증을 구현하기위한 몇 가지 새로운 속성을 도입합니다.
속성은 텍스트 영역 요소 및 대부분의 입력 유형에 대한 유효한 입력 범위를 정의하는 정규 표현식입니다. 속성 필드가 필요한지 여부를 지정합니다. 이러한 특성을 지원하지 않는 이전 브라우저의 경우 값을 호환 필러의 기초로 사용할 수 있습니다. 또한 실시간 양식 검증 (실시간 양식 검증)을 더 흥미로운 향상시킬 수 있습니다.
• 정상적인 브라우징 동작을 방해하지 않고 사용자 작업을 방해하지 않도록 검증을 과도하게 사용하지 않는다는 점에 유의해야합니다. 예를 들어, instantValidation() 이 기사에서는 덜 침습적 인 구현 방법을 소개합니다. 완전한 클라이언트 유효성 검사조차 아닙니다. 액세스 가능한 방식으로 구현 된 약간의 사용자 경험 향상 일 뿐이며 스크립트를 테스트했을 때 Firefox의 현재 기본 구현과 거의 동일하다는 것을 알았습니다! aria-invalid 기본 개념 onchange 최신 버전의 Firefox에서 필요한 필드가 비어 있거나 그 값이 패턴과 일치하지 않으면 필드는 다음 그림과 같이 빨간색 테두리를 표시합니다.

물론 이것은 즉시 발생하지 않을 것입니다. 이 경우 테두리가 필요한 각 필드에 대해 기본적으로 표시됩니다. 대신, 이러한 경계는 필드와 상호 작용 한 후에 만 ​​표시되며, 이는 기본적으로 이벤트와 유사합니다.

따라서 따라서

를 트리거 이벤트로 사용합니다. 또는 필드에 값을 입력하거나 붙여 넣는 한 onchange 이벤트를 사용할 수 있습니다. 그러나 이것은 빠른 연속으로 입력하는 동안 쉽게 반복적으로 트리거 할 수 있기 때문에 실제로 "즉각적인"일입니다. 이는 일부 사용자가 지루하거나 산만해질 수 있습니다. 어쨌든 는 프로그래밍 입력에서 트리거되지 않으며 oninput는 트리거되므로 타사 플러그인의 자동 완성과 같은 작업을 처리해야 할 수도 있습니다. oninput onchange HTML 및 CSS를 정의하십시오 html로 시작하여 우리의 구현을 살펴 보겠습니다.

이 예제는 일부 필드가 필요한 간단한 주석 형태이며 일부 필드가 확인되며 일부 필드는 두 조건을 모두 만족시킵니다. 속성이있는 필드에는 새로운 입력 유형을 지원하지 않는 보조 기술에 대한 폴백 시맨틱을 제공하기위한

> 속성도 있습니다. aria 사양은 또한 속성을 ​​정의하며, 필드가 유효하지 않은지 (html5에는 동등한 속성이 없음)를 나타냅니다. 속성은 분명히 접근성 정보를 제공하지만 빨간색 경계를 적용하는 CSS 훅으로도 사용할 수 있습니다.

우리는 국경에 대해 걱정하지 않고

를 사용할 수 있지만, 이것은 더 좋아 보일 것입니다. 그러나 이런 식으로

(예 : IE8)를 지원하지 않습니다.

<form action="#" method="post">
  <fieldset>
    <legend><strong>Add your comment</strong></legend>

    <p>
      <label for="author">Name <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="author"
        name="author"
        pattern="^([- \w\d\u00c0-\u024f]+)$"
        required="required"
        size="20"
        spellcheck="false"
        title="Your name (no special characters, diacritics are okay)"
        type="text"
        value=""
      >
    </p>

    <p>
      <label for="email">Email <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="email"
        name="email"
        pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$"
        required="required"
        size="30"
        spellcheck="false"
        title="Your email address"
        type="email"
        value=""
      >
    </p>

    <p>
      <label for="website">Website</label>
      <input
        id="website"
        name="website"
        pattern="^(http[s]?:\/\/)?([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2}(\/([-~%\.\(\)\w\d]*\/*)*(#[-\w\d]+)?)?$"
        size="30"
        spellcheck="false"
        title="Your website address"
        type="url"
        value=""
      >
    </p>

    <p>
      <label for="text">Comment <abbr title="Required">*</abbr></label>
      <textarea
        aria-required="true"
        cols="40"
        id="text"
        name="text"
        required="required"
        rows="10"
        spellcheck="true"
        title="Your comment"
      ></textarea>
    </p>

  </fieldset>
  <fieldset>
    <input name="preview" type="submit" value="Preview">
    <input name="save" type="submit" value="Submit Comment">
  </fieldset>
</form>

JavaScript 추가 required 이제 정적 코드가 있으므로 스크립트를 추가 할 수 있습니다. 먼저, 기본 aria-required 함수가 필요합니다 :

다음, 주어진 필드를 검증 해야하는지 확인하는 기능이 필요합니다.이 필드는 단순히 비활성화되지 않거나 읽기 전용이 아니며

또는 aria-invalid 속성이 있음을 테스트합니다. aria-invalid 처음 두 가지 조건은 장점으로 보일 수 있지만 요소의 및

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border: 1px solid #f00;
  box-shadow: 0 0 4px 0 #f00;
}

속성이 반드시 속성 상태를 반영하지 않기 때문에 필요합니다. 예를 들어, Opera에서는

속성에 대해 하드 코딩 된 속성이있는 필드는 속성에 대해 box-shadow를 반환합니다 (점 속성은 스크립트를 통해 설정된 상태에만 일치합니다). box-shadow 일단 이러한 유틸리티가 있으면 필드를 테스트하는 주요 유효성 검사 함수를 정의한 다음 필요에 따라 실제 검증을 수행 할 수 있습니다.

따라서 필드가 필요하지만 값이 없거나 값이 없거나 패턴과 값이 있지만 값이 패턴과 일치하지 않으면 필드가 유효하지 않습니다.

패턴은 이미 정규 표현식의 문자열 형태를 정의하기 때문에 문자열을 생성자로 전달하면 해당 값을 테스트 할 수있는 정규 표현 객체를 만듭니다. 그러나 값이 비어 있지 않도록 값을 사전 테스트해야하여 REGEX 자체가 빈 문자열을 고려할 필요가 없습니다. 일단 필드가 유효하지 않은지 판단하면 상태를 표시하기 위해

속성을 ​​제어 할 수 있습니다. 아직 속성이없는 유효하지 않은 필드 또는 속성이 삭제 된 유효한 필드에 추가하십시오. 안에. 아주 간단합니다! 마지막으로, 이것이 작동하려면 검증 함수를 aria-invalid 이벤트에 바인딩해야합니다. 다음과 같이 간단해야합니다. onchange 그러나 이것이 작동하기 위해서는 이벤트는 (일반적으로 이벤트 대의원으로 알려진 기술을 사용하여) 버블 링해야하지만 인터넷 익스플로러 8 세 이하에서는 이벤트

가 발생하지 않습니다. 버블 <..>. 우리는 이러한 브라우저를 무시하도록 선택할 수 있지만 특히 문제가 해결하기 쉬운 경우 부끄러운 일이라고 생각합니다. 그것은 단지 코드가 조금 더 복잡하다는 것을 의미합니다. 우리는 입력 및 텍스트 영역 요소 모음을 가져 와서 반복하고 각 필드에 개별적으로 바인딩해야합니다.

<form action="#" method="post">
  <fieldset>
    <legend><strong>Add your comment</strong></legend>

    <p>
      <label for="author">Name <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="author"
        name="author"
        pattern="^([- \w\d\u00c0-\u024f]+)$"
        required="required"
        size="20"
        spellcheck="false"
        title="Your name (no special characters, diacritics are okay)"
        type="text"
        value=""
      >
    </p>

    <p>
      <label for="email">Email <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="email"
        name="email"
        pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$"
        required="required"
        size="30"
        spellcheck="false"
        title="Your email address"
        type="email"
        value=""
      >
    </p>

    <p>
      <label for="website">Website</label>
      <input
        id="website"
        name="website"
        pattern="^(http[s]?:\/\/)?([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2}(\/([-~%\.\(\)\w\d]*\/*)*(#[-\w\d]+)?)?$"
        size="30"
        spellcheck="false"
        title="Your website address"
        type="url"
        value=""
      >
    </p>

    <p>
      <label for="text">Comment <abbr title="Required">*</abbr></label>
      <textarea
        aria-required="true"
        cols="40"
        id="text"
        name="text"
        required="required"
        rows="10"
        spellcheck="true"
        title="Your comment"
      ></textarea>
    </p>

  </fieldset>
  <fieldset>
    <input name="preview" type="submit" value="Preview">
    <input name="save" type="submit" value="Submit Comment">
  </fieldset>
</form>

결론과 전망 onchange 는 사용자가 양식을 작성하는 데 도움이되는 액세스 가능하고 직관적 인 팁을 제공하는 간단하고 비 침습적 실시간 양식 검증 향상입니다. onchange 이 스크립트가 구현 된 후에는 실제로 몇 단계만으로 완전한 호환성 필러 프로그램을 완료 할 수 있습니다. 이러한 스크립트는이 기사의 범위를 벗어나지 만 더 자세히 개발하려면 필드를 검증 해야하는지 여부에 따라 모든 기본 모듈이 테스트됩니다. 스키마 및/또는 에 따라 필드를 검증해야합니다. 및 바인딩 트리거 이벤트. 나는 인정해야한다, 그것이 정말로 그만한 가치가 있는지 확실하지 않다! 이미이 향상 (IE7 및 모든 최신 브라우저에서 작동)이 있고 서버 측 확인을 구현하는 것 외에는 선택의 여지가 없으며 및 의 브라우저에 대한 지원이 있다고 생각합니다. 사전 제외 확인에 사용했습니다.이 모든 것을 염두에두고 다른 호환 필러를 추가해야합니까? onchange

(실시간 확인에 대한 FAQ 섹션은 여기에 추가 할 수 있습니다. 콘텐츠는 원본 문서의 FAQS 섹션과 동일합니다)

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border: 1px solid #f00;
  box-shadow: 0 0 4px 0 #f00;
}

위 내용은 JavaScript를 사용한 즉각적인 양식 검증의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!