예제 코드와 함께 React.js를 사용하여 이메일 유효성 검사를 추가하는 방법

이메일 유효성 검사는 이메일 주소가 유효한지 여부를 확인하는 프로세스입니다. 이는 이메일 주소의 구문과 이메일 주소와 연결된 도메인 이름이 실제로 존재하는지 여부를 확인하여 수행됩니다.

이 튜토리얼에서는 React.js 앱에 이메일 유효성 검사를 추가하는 방법을 배웁니다. 반응 js 애플리케이션에서 이메일 주소 유효성 검사를 추가하는 방법에 대한 단계별 지침을 제공합니다. 이 예에서는 이름, 이메일 및 댓글 입력을 받고 require 및 email now에 대한 유효성 검사를 추가합니다. 잘못된 값을 입력하면 오류 메시지도 표시됩니다.

• 1단계: React 앱 설치
• 2단계: DemoForm 구성 요소 만들기
• 3단계: 컴포넌트 가져오기

1단계: React 앱 설치

먼저 아래 명령을 사용하여 React 앱을 설치해야 합니다.

npx create-react-app my-app

2단계: DemoForm 구성 요소 만들기

이 단계에서는 DemoForm.js 구성 요소 파일을 만들고 양식 유효성 검사 코드를 작성합니다. 다음과 같이 코드를 추가해 보겠습니다.

import React from 'react';
  
class DemoForm extends React.Component {
    constructor() {
    super();
    this.state = {
      input: {},
      errors: {}
    };
     
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
     
  handleChange(event) {
    let input = this.state.input;
    input[event.target.name] = event.target.value;
  
    this.setState({
      input
    });
  }
    
  handleSubmit(event) {
    event.preventDefault();
  
    if(this.validate()){
        console.log(this.state);
  
        let input = {};
        input["name"] = "";
        input["email"] = "";
        input["comment"] = "";
        this.setState({input:input});
  
        alert('Demo Form is submited');
    }
  }
  
  validate(){
      let input = this.state.input;
      let errors = {};
      let isValid = true;
  
      if (!input["name"]) {
        isValid = false;
        errors["name"] = "Please enter your name.";
      }
  
      if (!input["email"]) {
        isValid = false;
        errors["email"] = "Please enter your email Address.";
      }
  
      if (typeof input["email"] !== "undefined") {
          
        var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
        if (!pattern.test(input["email"])) {
          isValid = false;
          errors["email"] = "Please enter valid email address.";
        }
      }
  
      if (!input["comment"]) {
        isValid = false;
        errors["comment"] = "Please enter your comment.";
      }
  
      this.setState({
        errors: errors
      });
  
      return isValid;
  }
     
  render() {
    return (
      <div>
        <h1>React Form Validation Example</h1>
        <form onSubmit={this.handleSubmit}>
  
          <div class="form-group">
            <label for="name">Name:</label>
            <input 
              type="text" 
              name="name" 
              value={this.state.input.name}
              onChange={this.handleChange}
              class="form-control" 
              placeholder="Enter name" 
              id="name" />
  
              <div className="text-danger">{this.state.errors.name}</div>
          </div>
  
          <div class="form-group">
            <label for="email">Email Address:</label>
            <input 
              type="text" 
              name="email" 
              value={this.state.input.email}
              onChange={this.handleChange}
              class="form-control" 
              placeholder="Enter email" 
              id="email" />
   
              <div className="text-danger">{this.state.errors.email}</div>
          </div>
  
          <div class="form-group">
            <label for="comment">Comment:</label>
            <textarea 
              name="comment"
              value={this.state.input.comment} 
              onChange={this.handleChange}
              placeholder="Enter comment"
              class="form-control" />
  
              <div className="text-danger">{this.state.errors.comment}</div>
          </div>
             
          <input type="submit" value="Submit" class="btn btn-success" />
        </form>
      </div>
    );
  }
}
  
export default DemoForm;

3단계: 컴포넌트 가져오기

이 단계에서는 index.js 기본 파일에서 DemoFormcomponent를 가져옵니다. index.js 파일을 다음과 같이 업데이트해 보겠습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
  
import DemoForm from './DemoForm';
  
ReactDOM.render(
  <React.StrictMode>
    <div className="container">
       <DemoForm />
    </div>
  </React.StrictMode>,
  document.getElementById('root')
);
  
serviceWorker.unregister();

이제 응용 프로그램을 실행할 준비가 되었으므로 다음 명령을 사용하여 실행해 보겠습니다.

npm start

다음 URL을 엽니다.

http://localhost:3000

프로젝트 출력

행복한 코딩!!!