윅스 (Wix) 코딩 - 코드로 사용자 입력 유효성 검사하기 (Wix Code: About Validating User Input with Code)

윅스 (Wix) 코딩 - 코드로 사용자 입력 유효성 검사하기 (Wix Code: About Validating User Input with Code)

 

 

 

설명)

 

양식을 만들 때 사용자 입력이 컬렉션에 추가되기 전에 유효성을 검사할 수 있습니다. 양식에 입력된 데이터의 유효성을 확인하면 예상한 모든 데이터를 수신하고 데이터가 올바른 형식인지 확인할 수 있습니다.

 

가능한 경우 양식 유효성 검증을 통해 사용자가 유효하지 않은 값을 입력하지 않아야합니다. 유효하지 않은 데이터가 입력되는 것을 막을 수 없는 경우 데이터를 제출하기 전에 데이터를 확인하고 유효하지 않은 경우 이를 사용자에게 알려야합니다.

 

윅스 코드(Wix Code)를 사용하면 사용자 입력 요소의 설정을 사용하여 일부 입력란(필드) 수준 유효성 검사를 설정할 수 있습니다. 추가 유효성 검사는 자바스크립트(JavaScript )코드를 사용하여 추가할 수 있습니다.

 

이 기사에서는 코드 기반 유효성 검사에 중점을 둡니다. 사용자 입력 요소의 설정을 사용하여 입력란(필드) 수준 유효성 검사에 대한 자세한 내용은 설정을 사용하여 사용자 입력 유효성 검사를 참조합니다.

코드 기반 유효성 검사를 사용하면 두 개 이상의 요소에 의존하는 유효성 검사를 포함하여 입력 요소 설정을 통해 사용할 수 없는 유효성 검사를 추가 할 수 있습니다. 코드 기반 유효성 검사 기능은 Wix Code API 참조에서 찾을 수 있습니다.

 

사용자 정의 유효성 검사는 값이 없는 입력 요소에서 실행되지 않습니다.

 

 

 

일반적인 유효성 검사 시나리오 (Typical Validation Scenario)

일반적으로 사용자 지정 유효성 검사를 추가하려면 입력 요소의 onCustomValidation() 함수를 사용하여 설정한 이벤트 핸들러에 사용자 지정 유효성 검사 논리를 추가합니다. 해당 핸들러 내에서 요소가 유효하지 않음을 나타 내기 위해 reject() 함수를 호출합니다. 요소의 유효성은 사용자 상호 작용 또는 프로그래밍 방식으로 요소 값이 변경 될 때 검사됩니다.

 

예제)

간단한 예를 살펴보겠습니다. 이메일 입력란(필드)가있는 양식이 있고 특정 도메인의 이메일 주소를 입력하도록 사용자를 제한하려고 한다고 가정 해봅니다.

이렇게하려면 페이지의 onReady() 함수에 다음 코드를 추가합니다.

 

$w.onReady(function () {
  $w("#textInput1").onCustomValidation( (value, reject) => {
    if( !value.endsWith("@wix.com") ) {
      reject("Email address must be a wix.com address.");
 }
  } );
});

 

2행에서 요소의 onCustomValidation() 함수를 호출하여 요소의 유효성을 검사할 때 호출되는 이벤트 핸들러를 등록합니다. 이 함수는 value와 reject라는 두 개의 매개 변수를 받습니다. value 매개 변수는 유효성이 검사되는 요소의 현재 값입니다. reject 매개 변수는 요소를 무효화하기 위해 호출할 수 있는 함수입니다.

3행에서 값이 wix.com으로 끝나지 않는지 확인합니다.

값이 wix.com으로 끝나지 않는 경우에만 도달하는 4행에서 reject() 함수를 사용하여 요소를 무효화하고 거부 메시지를 전달합니다.

 

 

 

추가적인 유효성 검사 기능 (Additional Validation Functionality)

Wix Code API에는 사용자 지정 유효성 검사를 수행할 때 사용할 수 있는 몇 가지 추가 기능이 포함되어 있습니다.

 

valid

vaild 속성은 요소의 값이 유효한지 여부를 나타냅니다. 표준 및 사용자 지정 유효성 검사를 모두 고려합니다.

 

validity

validity 속성은 요소가 유효하지 않은 이유에 대한 자세한 정보가 포함 된 ValidityState 개체를 반환합니다.

 

validationMessage

validationMessage 속성은 잘못된 요소가 유효하지 않은 이유를 나타내는 메시지를 반환합니다. reject() 함수를 사용하여 validationMessage를 설정할 수 있습니다. 사용자 지정 메시지를 설정하지 않으면 validationMessage에 "value missing"또는 "type mismatch"와 같은 표준 유효성 검사 메시지가 포함될 수 있습니다.

 

resetValidityIndication()

resetValidityIndication() 함수는 요소가 유효하지 않음을 나타내는 시각적 큐를 지웁니다.

 

updateValidityIndication()

updateValidityIndication() 함수는 요소의 현재 유효 상태에 따라 요소가 유효하지 않은지 여부를 나타내는 시각적 큐를 업데이트합니다.

 

 

 

 

연관된 토픽)

윅스 (Wix) 코딩 - 설정 패널에서 사용자 입력 유효성 검사하기 (Wix Code: Working with User Input Validation in the Settings Panel)

 

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

https://support.wix.com/en/article/wix-code-about-validating-user-input-with-code