RegExp 및 Object Evaluator를 사용하여 양식 입력을 동적으로 검증하는 방법 | 정규 표현식 | 양식 유효성 검사

개체 평가기를 사용한 동적 양식 유효성 검사 자습서에 오신 것을 환영합니다.

참고: 이 튜토리얼은 RegExp를 위한 것이 아니라 객체 속성에 액세스하기 위한 "[ ]"의 최상의 사용 사례를 이해하는 데 도움을 주기 위한 것입니다.

빠른 정보: 다음을 포함하여 개체에 액세스하는 두 가지 가능한 방법이 있습니다.

objName.objProperty
objName[objProperty]

그러나 여기서 질문은 가장 좋은 사용 사례는 무엇입니까?

대답은 속성에 직접 액세스하려는 경우 "점"구문(즉, 정적)을 사용하고 속성에 동적으로 액세스하려는 경우 대괄호를 사용하는 것입니다. 동적으로는 사용자가 값을 변경함에 따라 액세스할 속성이 변경됨을 의미합니다. 예:

const STAFF_NAMES ={
      staffOne:”CreativeAdams”,
      staffTwo:”CreativePerete”,
      staffThree:”CreativeJerry”
}

const getStaffName=staffKey=>{
   return STAFF_NAMES[staffKey]
}

아래 예제는 속성에 액세스하는 동적 방법 중 하나입니다.

getStaffName(“staffOne”);//CreativeAdams 
getStaffName(“staffTwo”);//CreativePerete

RegExp 및 개체 평가기 구문을 사용하여 양식을 동적으로 검증하는 방법에 대한 전체 코드에 대한 링크입니다.
Click Me

참고 사항: 양식 유효성 검사는 다음과 같은 다양한 방법으로 수행할 수 있습니다.
개발자에게 고통스러운 각 입력의 유효성을 검사합니다.
입력 요소를 반복하고 해당 유형 또는 이름에 액세스한 다음 유효성 검사를 결정합니다. 하지만 시간 복잡도 문제가 발생할 것이라고 장담합니다.
최고의 솔루션은 여기에서 제공합니다: Click Me

빠른 설명

코드 내에서 가장 중요한 것은 13번째 줄에 있습니다. 여기에서 평가와 유효성 검사가 발생합니다.

그래서 이 RegExp[e.target.name]는 역동성을 가능하게 하는 것입니다. 이것은 객체/변수 평가를 위한 자바스크립트 구문입니다. 또한 React 커뮤니티 출신이라면 간단히 다음을 수행하여 상태에 대한 동적 입력 값 처리를 접했을 것입니다.
this.setState({…this.state,

///이것은 단순히 동일한 것(평가)입니다.

감사합니다. 멋진 하루 보내세요.