[javascript] Ember.js에서 입력 폼의 유효성 검사는 어떻게 처리하나요?

04 Dec 2023

javascript

Ember.js는 입력 폼의 유효성 검사를 처리하는 데 도움이 되는 다양한 기능을 제공합니다. 이를 통해 사용자가 입력한 데이터의 유효성을 검증하고, 필요한 경우 에러 메시지를 표시할 수 있습니다. 아래는 Ember.js에서 입력 폼의 유효성 검사를 처리하는 간단한 예제입니다.

먼저, 입력 폼을 포함하는 컴포넌트를 생성하고, 컴포넌트 내부에 유효성 검사를 위한 코드를 작성합니다. 예를 들어, 회원 가입 폼을 만든다고 가정해봅시다.

import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  emailAddress: '',
  password: '',

  isEmailValid: computed('emailAddress', function() {
    // 이메일 주소 유효성 검사 로직 작성
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(this.emailAddress);
  }),

  isPasswordValid: computed('password', function() {
    // 비밀번호 유효성 검사 로직 작성
    return this.password.length >= 8;
  }),

  isFormValid: computed('isEmailValid', 'isPasswordValid', function() {
    // 폼 전체의 유효성 검사
    return this.isEmailValid && this.isPasswordValid;
  }),

  actions: {
    submitForm() {
      if (this.isFormValid) {
        // 유효성 검사 통과 시 폼 데이터를 서버로 전송
        // ...
      } else {
        // 에러 메시지 표시 또는 유효성 검사 실패 시 사용자에게 알림
        // ...
      }
    }
  }
});

위의 예제에서는 emailAddress와 password라는 두 가지 입력 필드에 대한 유효성 검사를 수행하는 isEmailValid와 isPasswordValid라는 computed property를 정의합니다. isFormValid라는 computed property는 폼 전체의 유효성 검사를 수행하며, submitForm 액션에서 해당 값을 확인하여 폼 데이터를 서버로 전송하거나 에러 메시지를 표시합니다.

이제 위의 예제를 기반으로 유효성 검사가 필요한 입력 폼을 생성하고, 사용자가 폼을 제출할 때 유효성을 검사하여 적절한 조치를 취할 수 있습니다.