React에 대한 간단한 양식 유효성 검사

React에 대한 간단한 양식 유효성 검사

React에 대한 간단한 양식 유효성 검사

• 설치: |_+_|
• CDN: https://unpkg.com/react-form-with-constraints/dist/

릴리스 간의 주요 변경 사항 및 수정 사항에 대해서는 변경 로그를 확인하십시오.

소개: HTML5 양식 유효성 검사란 무엇입니까?

클라이언트 측 유효성 검사는 외형적이므로 보안을 적용하기 위해 의존해서는 안 됩니다.

|_+_| HTML5 속성은 사용자가 값을 채워야 함을 지정합니다. Email: Submit 입력한 텍스트가 이메일 주소처럼 보이는지 확인합니다.

자원:

• HTML5로 멋진 양식 만들기
• 제약 조건 유효성 검사: 웹 양식에 대한 네이티브 클라이언트 측 유효성 검사
• MDN - 양식 데이터 유효성 검사
• MDN - 양식 입력 유형
• UX 연구 기사 - 인라인 양식 유효성 검사의 사용성 테스트

react-form-with-constraints가 가져오는 것

• 최소한의 API 및 설치 공간
• 눈에 거슬리지 않음: 쉽게 적응할 수 있음 반응 코드
• HTML5 오류 메시지 개인화: |_+_|
• 사용자 지정 제약 조건: |_+_|
• 경고 및 정보: |_+_|, |_+_|
• 비동기 유효성 검사
• React 외에 종속성 없음(Redux, MobX… 없음)
• 필요한 것만 다시 렌더링
• 쉽게 확장 가능
• 부트스트랩 4 npm 패키지로 스타일링 |_+_|
• 머티리얼 UI npm 패키지와 통합 |_+_|
• 을지 지하다 네이티브 반응 npm 패키지로 |_+_|
• ...

예

• CodePen 기본 암호 예: https://codepen.io/tkrotoff/pen/BRGdqL ( 코드샌드박스 버전 )

  

  넷플릭스 com 슬래시 활성화

• 부트스트랩 4 예제(React 후크)

• Material-UI 예제(React hooks)

• WizardForm 예제(React hooks)

• SignUp 예제(React 클래스)

• ClubMembers 예제(React 클래스 + MobX)

• 상태가 없는 비밀번호 예제(React hooks)

• React Native 예제(React 클래스):

  iOS	기계적 인조 인간

• 의 다른 예 예제 디렉토리 :

  • 평범한 이전 React 양식 유효성 검사 예제(React hooks)
  • HTML5 제약 조건 유효성 검사 API 예제로 반응(React hooks)
  • 서버 측 렌더링 예제(React hooks)

작동 방식

API는 다음과 같은 방식으로 작동합니다. 리액트 라우터 :

에서 영감을 받기도 합니다. AngularJS ngMessage .

유효성 검사를 직접 구현해야 한다면 각 필드에 대한 오류를 추적하는 전역 개체 . 제약 조건이 있는 반응형 비슷하게 작동 . 그것은 사용 반응 컨텍스트 공유하기 |_+_| 건너편에 있는 물건 My custom error message 그리고 ...}> .

불

API는 제약 조건 위반이 피드백을 표시할 때 필드에 대해 다음과 같이 읽습니다. 예:

(*) element.validation메시지

비동기 지원은 다음과 같이 작동합니다.

Microsoft 클릭하여 실행 비활성화

트리거 유효성 검사:

중요 사항:

필드(예: |_+_|)에 일치하는 |_+_|가 없으면 라이브러리는 이 필드에 대해 알지 못하므로 유효성 검사를 수행하지 않습니다. 필드 이름은 |_+_|와 일치해야 합니다.

• Should be at least 5 characters long !/d/.test(value)} warning> Should contain numbers !/[a-z]/.test(value)} warning> Should contain small letters !/[A-Z]/.test(value)} warning> Should contain capital letters

  • |_+_| => 참조 |_+_| 속성(예: |_+_|)은 현재 양식에 고유해야 합니다.
  • |_+_| => 렌더링을 중지할 때 |_+_|s, 기본적으로 처음 발생한 오류에서 중지됨(|_+_|s 순서가 중요함)

  참고: |_+_| 어디에서나 동일한 |_+_|에 대해 원하는 만큼 가지고, 중첩하고, |_+_|…와 혼합합니다. 예:

• FieldsStore

  • FieldFeedbacks:
    • FieldFeedback 문자열로 => HTML5 제약 조건 위반 이름
    • |_+_| => 모든 HTML5 제약 조건 위반과 일치
    • |_+_| => 필드가 유효한 경우에만 피드백을 표시합니다.
    • |_+_| => 사용자 정의 제약
  • |_+_| => 피드백을 오류로 처리합니다(기본값).
  • |_+_| => 피드백을 경고로 취급합니다.
  • |_+_| => 피드백을 정보로 취급
  • |_+_| => 제약 조건이 일치할 때 무엇을 표시할지; 누락된 경우 다음을 표시합니다. HTML5 오류 메시지 만약에 어떠한

• |_+_| => 비동기 버전 |_+_| (비슷한 API 반응 약속 )

  • |_+_| => 기다리고 싶은 약속
  • |_+_| => 약속이 보류 중일 때 실행
  • |_+_| => 약속이 해결될 때 실행
  • |_+_| => 약속이 거부될 때 실행

• Should be at least 5 characters long

  • |_+_| => |_+_| 변경하면 적절한 |_+_|를 다시 렌더링하고 내부 |_+_|를 업데이트합니다. 인수가 없으면 모든 필드(|_+_|)의 유효성이 검사됩니다.

  • |_+_| => 더티가 아닌 모든 필드만 검증합니다(이미 |_+_|로 검증된 필드는 재검증하지 않음). 모든 필드를 강제로 재검증하려면 |_+_|를 사용합니다. |_+_|(으)로 이름이 변경될 수 있습니다. 또는 |_+_| 미래에?

  • |_+_| => 같음 |_+_| 인수 없이 일반적으로 |_+_|를 제출하기 전에 호출됩니다. 향후 제거될 수 있습니까?

  • |_+_| =>는 |_+_|, |_+_| 다음에 호출되어야 합니다. 또는 |_+_|, 필드가 유효한지 나타냅니다.

  • |_+_| => 필드에 피드백이 있는지 여부를 나타냅니다.

  • |_+_| => 주어진 필드를 재설정하고 적절한 |_+_|s를 다시 렌더링합니다. 인수가 없으면 모든 필드(|_+_|)가 재설정됩니다.

  • for field 'password' when constraint violation 'valueMissing' display when constraint violation 'patternMismatch' display 'Should be at least 5 characters long' =>

    available ? Username available : Username already taken, choose another // Why key=*? Needed otherwise React gets buggy when the user rapidly changes the field } />

• function MyForm() { const form = useRef(null); async function handleChange({ target }) { // Validates only the given fields and returns Promise await form.current.validateFields(target); } async function handleSubmit(e) { e.preventDefault(); // Validates the non-dirty fields and returns Promise await form.current.validateForm(); if (form.current.isValid()) console.log('The form is valid'); else console.log('The form is invalid'); } return ( Too short available ? Username available : Username already taken, choose another } /> ); }

  스타일을 지정하려면 |_+_|를 사용하세요. |_+_| 대신: 클래스를 추가합니다 |_+_|, |_+_|, |_+_|, |_+_| 및/또는 |_+_| 에 |_+_| 필드가 검증될 때.

  예: |_+_| 생성할 수 있습니다 |_+_|

  엑스포 방송 업데이트

  참고로 |_+_| 그리고 |_+_| 이미 해당 프레임워크와 일치하도록 필드 스타일을 지정했습니다.

브라우저 지원

제약 조건이 있는 반응형 요구 사항 모든 최신 브라우저 및 IE >= 10에서 지원됩니다. 또한 다음과 같은 폴리필이 필요합니다. 코어-js IE >= 10을 지원하려면 다음을 참조하십시오. React JavaScript 환경 요구 사항 .

|_+_|, |_+_|, FieldFeedbacks ...

...그리고/또는 의존 |_+_| 기능:

마지막 경우에는 번역을 직접 관리해야 합니다(가입 예 참조).

npm 패키지를 사용하는 방법은 무엇입니까?

ESNext(현재 ES2018) + ES 모듈

내부 파일 FieldFeedbacks (패키지.json |__+_|).

최신 브라우저 또는 Node.js가 필요하거나 Babel(또는 TypeScript tsc)을 사용하여 react-form-with-constraints 소스 코드를 변환해야 합니다.

몇 가지 장점:

• |_+_|의 결합 사용 |_+_| 덕분에 더 작은 번들을 생성합니다. 흔들리는 나무
• Babel을 사용하여 react-form-with-constraints 소스 코드를 변환할 수 있습니다. 사전 설정 환경 그리고 브라우저 목록 구성

이것이 작동하려면 제외하지 마십시오 |_+_| 웹팩 구성에서 예:

|_+_|를 사용하여 Babel을 구성하고 싶을 것입니다.

ES5 + CommonJS

클래식 ES5 번역, 내부 파일 (패키지.json |__+_|). 나무가 흔들리지 않습니다.

UMD(범용 모듈 정의) + ES5

내부 파일 stop?: 'first' | 'first-error' | 'first-warning' | 'first-info' | 'no' . 일반적인 용도는 |_+_| index.html 내부.

좋은 사용 사례는 코드펜 , 파일은 Rollup에 의해 생성됩니다.

다운로드 세부 정보:

작가: 트크로토프

공식 웹 사이트: https://github.com/tkrotoff/react-form-with-constraints

#reactjs #자바스크립트

또한보십시오:

• 모든 딥 러닝은 통계적 모델 구축입니다.
• Patron(PAT) 구매 방법 및 위치 – 쉬운 단계별 가이드
• Web API를 이용한 파일/이미지 업로드 | [지원되지 않는 미디어 유형 오류 해결]
• 알리타스(ALT)란? | 알리타스 토큰이란 | ALT 토큰이란
• 모바일 우선 구성 가능한 핀 코드 입력 구성 요소