Javascript 양식 필드 유효성 검사 및 서식 지정을 트리거하는 이벤트는 무엇입니까?

Question

먼저 서버 측의 모든 필드를 검증하므로 클라이언트 측 유용성에 대한 의문입니다.

에 대한 전통적인 통념은 무엇인가? 정확히 언제 javascript를 사용하여 html 양식 입력 필드의 유효성을 검사하고 형식을 지정하려면?

예를 들어 전화번호 필드가 있습니다.숫자, 공백, 괄호, 하이픈이 허용됩니다.우리는 필드에 10자리 숫자가 있기를 원합니다.또한 사용자가 그런 식으로 입력하지 않더라도 필드가 (123) 456-7890처럼 보이길 원합니다.

우리는 할 수 있을 것 같아

• 사용자가 필드를 빠져 나올 때 유효성을 검사하고 형식화하십시오.
• 입력 한 모든 문자에 대한 검증 및 형식.
• 키 스트로크를 가로 채고 사용자가 잘못된 문자를 입력하는 것을 방지합니다.
• 위 항목의 일부 조합(예:입력 시 형식화 및 종료 시 유효성 검사, 입력 시 방지 및 종료 시 형식화 등)
• [추가됨] 사용자가 제출을 클릭하면 기다렸다가 모든 유효성 검사와 형식 지정을 수행합니다.

나는 그것이이 모든 방법을 수행 한 것을 보았지만, 사용성 관점에서 가장 좋은 것과 일반적으로 그 이유에 대한 정보를 찾을 수는 없습니다.

[편집하다:일부 설명]

우리는 어떠한 형식 표준도 시행하지 않습니다.형식이라고 하면 자바스크립트를 사용하여 보기 좋게 다시 작성한다는 의미입니다.사용자가 1234567890을 입력하면 (123) 456-7890으로 변경됩니다.실패할 수 있는 "형식 규칙"은 없습니다.

나는 이것을 유효성 검사와 구별합니다. 충분한 숫자를 입력하지 않으면 수정하도록 해야 하기 때문입니다.

질문을 "정확히 유효성을 검사할 시기와 정확히 언제 포맷해야 하는지에 대한 일반적인 통념은 무엇입니까...?"로 바꿔야 할 것 같습니다.

지금까지의 답변에 좋은 정보가 있습니다!

편집하다:나는 다른 사람들도 나처럼 이 링크가 도움이 되기를 바라는 마음으로 아래 내 답변을 받아들입니다.

Answer 1

지금까지 가장 좋은 답변은 답변이 아니라 댓글이었습니다(위 참조). 댓글에서 누군가가 놓친 경우를 대비하여 답변으로 추가하고 있습니다.

A List Apart에 대한 다음 기사를 참조하세요.

웹 양식의 인라인 유효성 검사 작성자: Luke Wroblewski

Answer 2

사용자가 필드를 종료하면 유효성을 검사하고 형식을 지정합니다.

예.유효성 검사 또는 형식 지정 규칙이 실패하는 경우 사용자에게 비침투적 피드백을 제공합니다.noninasive란 경고나 모달 대화 상자를 팝업하여 사용자가 무언가를 클릭하도록 강요하지 않는다는 의미입니다.대신 유효성 검사 또는 형식 지정이 실패한 필드 옆이나 아래에 메시지를 동적으로 표시합니다.

입력한 모든 문자에 대해 유효성을 검사하고 형식을 지정합니다.

아니요.사용성을 방해한다고 생각합니다.대신 사용자에게 서식 지정 규칙이나 유효성 검사 규칙이 무엇인지에 대한 도구 설명이나 기타 힌트를 제공하세요.예:"필수" 필드의 경우 사실상 어디에나 있는 별표이고 형식이 있는 필드의 경우 예상되는 형식이 무엇인지 사용자에게 미리 알려줍니다.

키 입력을 차단하고 사용자가 잘못된 문자를 입력하는 것을 방지합니다.

사용자가 유효하지 않은 문자를 입력하는 것을 방지하려면 비침해적으로 입력을 차단한 이유를 사용자에게 알려주십시오.또한 현장의 초점을 도용하지 마십시오.

그래서 나에게 일반적인 원칙은 다음과 같습니다.

1. 유효성 검사 및 형식 지정 규칙을 사용자에게 미리 알려주세요.
2. 사용자가 시력을 가지고 있다고 가정하지 마십시오. 따라서 웹 접근성과 화면 판독기를 염두에 두십시오.(인트라넷과 같이 대상 고객이 제한된 웹 사이트를 개발하는 경우는 제외됩니다.)
3. 사용자에게 비침습적 피드백을 제공합니다. 즉, 실패할 때마다 사용자가 경고 상자나 모달 대화 상자를 클릭하지 않도록 해야 합니다.
4. 어떤 입력 상자가 유효성 검사 또는 형식 지정 규칙에 실패했는지 명확하게 설명하고 사용자에게 입력이 실패한 이유를 알려주세요.
5. 피드백을 제공할 때 마우스/포인터 초점을 도용하지 마십시오.
6. 키보드 지향 사용자가 필드를 완성할 때 탭을 누르고 다음 논리적 입력/선택 필드로 이동할 수 있도록 탭 순서를 염두에 두십시오.

Answer 3

다양한 옵션을 설명하려고 했지만 기존 js 프레임워크를 사용하여 입력 마스크를 처리하는 것만으로도 도움이 될 수 있습니다. 다음은 다양한 옵션에 대한 좋은 요약입니다.

Answer 4

bmb는 모든 형식을 허용하고 이를 원하는 형식(xxx) nnn-xxxx로 변경한다고 명시합니다.아주 좋습니다.문제는 A) 형식 변경, B) 유효성 검사의 시기입니다.

A) 형식 변경은 사용자가 해당 필드를 종료할 때 이루어져야 합니다.더 빨리는 짜증나고 나중에는 변경 사항을 표시하려는 목적을 전혀 상실합니다.

B) 검증은 현장을 종료하거나 양식을 제출할 때 가장 적절하게 수행됩니다.Sooner는 사용자에게 실망스럽고 혼란스럽습니다.두 개 이상의 화면이 있는 길고 복잡한 형식에서는 수정을 더 쉽게 하기 위해 컨트롤 종료 시 유효성 검사를 수행하는 것이 좋습니다.짧은 양식에서는 양식 작성 흐름이 깨지지 않도록 제출 시에 이를 수행합니다.이것은 실제로 판단을 요하는 것이므로 가능하다면 실제 사용자에게 테스트해 보십시오.

어쨌든 실제 사용자를 대상으로 작업을 테스트하는 것이 바람직하지만 이에 대한 예산이나 액세스 권한이 없는 경우 빠르고 더러운 "사용자" 테스트가 이와 같은 결정에 도움이 될 수 있습니다.소수의 사람들을 잡을 수 있습니다. 소프트웨어에서 작동하지 않았습니다 (최대한 실제 최종 사용자와 일치하도록) 양식을 작성하도록 요청하세요.오류가 발생하도록 구체적으로 항목을 입력한 다음 수정하는 것을 지켜보라고 지시합니다.그들의 사고 과정을 추측할 필요가 없도록 그들이 무엇을 하고 있는지 큰 소리로 이야기하도록 요청하십시오.문제가 있는 부분과 가장 혼란스럽고 짜증나는 부분이 무엇인지 찾아보세요.

Answer 5

분야별로 다릅니다.그러나 전화번호와 같은 경우 일반적으로 누군가가 숫자가 아닌 숫자를 입력하는 것을 방지하는 것이 매우 좋습니다.

이렇게 하면 입력할 때 1-800-HELLOWORLD 전화번호가 올바르게 표시되지 않고 해당 필드에 숫자만 허용된다는 사실을 알게 될 것입니다(입력 필드 옆에 일종의 정보 필드로 강조 표시할 수도 있음).

그것은 어색한 모달 대화, 팝다운 오류 필드 또는 서버 생성 메시지 표시보다 훨씬 더 직관적이고 친숙한 것 같습니다. ~ 후에 작성이 완료되었습니다.

물론 궁극적인 클라이언트 측 검증과 이를 구축하기 위한 궁극적인 기술 요구 사항의 균형을 항상 유지하십시오.예를 들어 페이지가 제출되기 전에 Ajax로 이미지 업로드의 유효성을 검사하는 과정을 시작한다면 꽤 긴 시간이 걸릴 수 있습니다.

편집하다:또한 청중을 고려하십시오.기술적인 생각이 더 많은 사람들은 인터넷에 대한 Ajax 이외의 접근 방식에 더 익숙한 사람들보다 "동적" 형식을 더 많이 수용할 것입니다.

Answer 6

개인적으로 나는 종료 시 형식을 지정하고 유효성을 검사하는 것이 사용자에게 가장 귀찮은 일이라고 생각합니다.원하는 형식으로 번호를 입력하게 한 다음(전화번호에는 이러한 형식이 많이 있음) 원하는 형식으로 변경합니다. 사용자가 선호하는 형식으로 데이터를 처리할 수 있으면 사용자가 선호하는 대로 따르도록 강요하지 마세요.

또한 입력을 마치지 않았을 때 확인 메시지가 표시되는 것도 짜증나고, 텍스트 필드에 특정 문자를 넣을 수 없다는 것도 정말 짜증납니다.

제가 생각할 수 있는 유일한 예외는 "이 값을 사용할 수 있습니까?" 상황(예: 고유한 사용자 이름 만들기)입니다. 이 경우 즉각적인 피드백이 정말 편리합니다.

Answer 7

처음 세 가지 옵션은 정말 짜증나는 일이라고 생각합니다.무언가를 입력하는 도중에 방해를 받는 것보다 더 나쁜 것은 없습니다.

사용자의 주요 목표는 가능한 한 빨리 양식을 작성하는 것이며 속도를 늦추는 모든 행위는 사용자가 양식을 완전히 포기하게 만드는 또 하나의 이유일 뿐입니다.

또한 신용카드 번호나 전화번호 같은 것을 강제로 입력하는 것도 싫습니다. 이 형식이 양식을 만족시키는 데 딱 맞는 형식입니다.가능할 때마다 사용자에게 내용을 입력할 수 있는 상자를 제공하고 서식을 처리하도록 하지 마십시오.

전화번호의 경우 원하는 대로 입력하고, 마음에 들지 않는 부분은 제거하고, 원하는 형식((124) 567-8901)으로 다시 합치고 다음과 같은 경우 오류가 발생하도록 하세요. 캔트.

특정 형식에 대해 반드시 유효성을 검사해야 하는 경우 양식을 제출할 때 유효성을 검사한 다음 문제가 있는 필드를 강조 표시하세요.

Answer 8

유효성 검사를 수행하는 가장 사용자 친화적인 방법은 값이 유효하지 않음을 나타내는 표시기를 입력 필드 옆에 표시하는 것입니다.이렇게 하면 사용자가 입력하는 동안 방해를 받지 않고 유효한 항목을 입력했는지 여부를 지속적으로 확인할 수 있습니다.나는 정보를 긴 형식으로 입력하여 마지막에 "아, 돌아가서 필드 1을 수정해야 합니다"라고 알려주는 것을 싫어합니다.

사용자 유형에 따라 표시기를 표시하거나 숨기도록 설정할 수 있습니다.값이 유효하지 않을 때 경고 아이콘을 사용하고 값이 유효하지 않은 이유를 설명하는 도구 설명을 아이콘에 설정합니다.

화면 공간이 있는 경우 "유효함" 또는 "XXX-YYY-XXXX 형식이어야 함"과 같은 텍스트를 입력할 수 있습니다.

키 입력별로 유효성 검사를 수행할 때 붙여넣은 텍스트도 잡아야 한다는 점을 명심하세요.

또한, 잘못된 키 입력이 처음부터 입력되는 것을 방지해야 합니다.

Answer 9

유용성 모범 사례를 보려면 다음을 읽어 보는 것이 좋습니다. 완벽한 형태를 디자인하는 방법 (더 정확하게 상황 및 지원) 그리고 아름다운 형태.

양식 유효성 검사 프레임워크의 경우 다음을 확인하세요. f검증기 그리고 아이마스크 콤보는 서로 보완적이므로 함께 완벽하게 작동합니다.