ReactJS에서 양식의 유효성을 검사하는 방법은 무엇입니까?

이 튜토리얼에서는 reactjs에서 props , state , constructor , events 을 사용할 것입니다.

먼저 Signup과 같은 구성 요소를 만들고 구성 요소 클래스에서 확장합니다(반응에서 구성 요소 가져오기).

이제 생성자를 구성 요소에 추가합니다.

양식 필드 변경 시 트리거할 함수 handleChange를 만듭니다.

양식 제출 시 트리거할 함수 handleSubmit을 만듭니다.

렌더링 방법 및 양식 만들기 내부의 템플릿에 오류를 표시합니다.

다음은 완전한 코드입니다.

import { Component } from "react";

class Signup extends Component {

    constructor(props) {
        super(props);
        this.state = {
            fullName: null,
            email: null,
            password: null,
            errors: {
                fullName: '',
                email: '',
                password: '',
            }
        };
    }


    handleChange = (event) => {

        event.preventDefault();

        const validEmailRegex =
            RegExp(/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i);

        const { name, value } = event.target;
        let errors = this.state.errors;

        switch (name) {
            case 'fullName':
                errors.fullName =
                    value.length < 5
                        ? 'Full Name must be 5 characters long!'
                        : '';
                break;
            case 'email':
                errors.email =
                    validEmailRegex.test(value)
                        ? ''
                        : 'Email is not valid!';
                break;
            case 'password':
                errors.password =
                    value.length < 8
                        ? 'Password must be 8 characters long!'
                        : '';
                break;
            default:
                break;
        }

        this.setState({ errors, [name]: value }, () => {
            console.log(errors)
        })
    }


    handleSubmit = (event) => {

        event.preventDefault();

        const validateForm = (errors) => {
            let valid = true;
            Object.values(errors).forEach(
                // if we have an error string set valid to false
                (val) => val.length > 0 && (valid = false)
            );
            return valid;
        }

        if (validateForm(this.state.errors)) {
            console.info('Valid Form')
        } else {
            console.error('Invalid Form')
        }
    }


    render() {
        console.log(this.props);
        return ( 
            <div>
                <form onSubmit={(event) => this.handleSubmit(event)}>
                    <input type="text" name="fullName" onChange={(event) => this.handleChange(event)} />
                    {errors.fullName.length > 0 &&
                        <span className='error'>{errors.fullName}</span>}

                    <input type="email" name="email" onChange={(event) => this.handleChange(event)}/>
                    {errors.email.length > 0 &&
                        <span className='error'>{errors.email}</span>}

                    <input type="password" name="password" onChange={(event) => this.handleChange(event)}/>

                    {errors.password.length > 0 &&
                        <span className='error'>{errors.password}</span>}

                    <input type="submit" name="submit" />
                </form>

            </div>

        );
    }
}

export default Signup;

구독 좋아요 공유와 긍정적인 피드백을 보내주세요.

더 많은 자습서를 보려면 visit my website .

감사:)
행복한 코딩 :)