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 .

    감사:)
    행복한 코딩 :)

    좋은 웹페이지 즐겨찾기