ReactJS에서 양식의 유효성을 검사하는 방법은 무엇입니까?
17036 단어 beginnerswebdevreactreactnative
먼저 Signup과 같은 구성 요소를 만들고 구성 요소 클래스에서 확장합니다(반응에서 구성 요소 가져오기).
다음은 완전한 코드입니다.
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 .
감사:)
행복한 코딩 :)
Reference
이 문제에 관하여(ReactJS에서 양식의 유효성을 검사하는 방법은 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/readymadecode/how-to-validate-form-in-reactjs-2o5o텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)