验证不适用于这些并且无法在论坛中写东西
Validation is not working for these and unable to write something in the forum
我正在使用 React bootstrap 中的这种形式。但是当我试图验证它不起作用时。有人可以帮忙吗,先谢谢了。
但是当我尝试验证用户名、电子邮件和 phone 时,我无法执行此操作,也无法在论坛中写东西,有人可以帮我解决我犯的确切错误
import React, { useEffect, useState } from 'react'
import { Button, Col, Form, Row } from 'react-bootstrap';
const AddressValidation = () => {
const initialValues = { username: "", email: "", password: "" };
const [formValues, setFormValues] = useState(initialValues);
const [formErrors, setFormErrors] = useState({});
const [isSubmit, setIsSubmit] = useState(false);
const handleChange = (e) => {
const { name, value } = e.target;
setFormValues({ ...formValues, [name]: value });
};
const handleSubmit = (e) => {
e.preventDefault();
setFormErrors(validate(formValues));
setIsSubmit(true);
};
useEffect(() => {
console.log(formErrors);
if (Object.keys(formErrors).length === 0 && isSubmit) {
console.log(formValues);
}
}, [formErrors]);
const validate = (values) => {
const errors = {};
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i;
if (!values.username) {
errors.username = "Username is required!";
}
if (!values.email) {
errors.email = "Email is required!";
} else if (!regex.test(values.email)) {
errors.email = "This is not a valid email format!";
}
if (!values.username) {
errors.username= "usernameis required";
} else if (values.username.length < 4) {
errors.username= "username must be more than 4 characters and combination of 3 letters";
} else if (values.username.length > 10) {
errors.username= "username cannot exceed more than 10 characters";
}
return errors;
};
return (
<div className="container">
<pre>{JSON.stringify(formValues, undefined, 2)}</pre>
<Form onSubmit = { handleSubmit }>
<h1> Payment Validation Form</h1>
<Row className="mb-3">
<Form.Group as={Col} controlId="formGridUsername">
<Form.Label>User Name</Form.Label>
<Form.Control type="text" placeholder="Enter User Name" value={ formValues.username}
onChange = {handleChange}/>
</Form.Group>
<Form.Group as={Col} controlId="formGridEmail">
<Form.Label>Email</Form.Label>
<Form.Control type="email" placeholder="Enter email" value={ formValues.email}
onChange = {handleChange} />
</Form.Group>
<Form.Group as={Col} controlId="formGridPhone">
<Form.Label>phonenumber</Form.Label>
<Form.Control type="number" placeholder="Enter email" value={ formValues.phonenumber}
onChange = {handleChange} />
</Form.Group>
</Row>
<Form.Group className="mb-3" controlId="formGridAddress1">
<Form.Label>Address</Form.Label>
<Form.Control placeholder="1234 Main St" />
</Form.Group>
<Form.Group className="mb-3" controlId="formGridAddress2">
<Form.Label>Address 2</Form.Label>
<Form.Control placeholder="Apartment, studio, or floor" />
</Form.Group>
<Row className="mb-3">
<Form.Group as={Col} controlId="formGridCity">
<Form.Label>City</Form.Label>
<Form.Control />
</Form.Group>
<Form.Group as={Col} controlId="formGridState">
<Form.Label>State</Form.Label>
<Form.Select defaultValue="Choose...">
<option>Choose...</option>
<option>Stockholm</option>
<option>Mälmo</option>
</Form.Select>
</Form.Group>
<Form.Group as={Col} controlId="formGridZip">
<Form.Label>Zip</Form.Label>
<Form.Control />
</Form.Group>
</Row>
<Form.Group className="mb-3" id="formGridCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</div>
);
}
export default AddressValidation
您需要将 name 属性 添加到您的输入中。否则你会从 event.target:
得到一个空名称 属性
<Form.Control
name="username"
type="text"
placeholder="Enter User Name"
value={formValues.username}
onChange={handleChange}
/>
您的验证似乎有效。当我尝试提交时,我可以在控制台中看到错误消息:
{username: 'usernameis required', email: 'Email is required!'}
我正在使用 React bootstrap 中的这种形式。但是当我试图验证它不起作用时。有人可以帮忙吗,先谢谢了。
但是当我尝试验证用户名、电子邮件和 phone 时,我无法执行此操作,也无法在论坛中写东西,有人可以帮我解决我犯的确切错误
import React, { useEffect, useState } from 'react'
import { Button, Col, Form, Row } from 'react-bootstrap';
const AddressValidation = () => {
const initialValues = { username: "", email: "", password: "" };
const [formValues, setFormValues] = useState(initialValues);
const [formErrors, setFormErrors] = useState({});
const [isSubmit, setIsSubmit] = useState(false);
const handleChange = (e) => {
const { name, value } = e.target;
setFormValues({ ...formValues, [name]: value });
};
const handleSubmit = (e) => {
e.preventDefault();
setFormErrors(validate(formValues));
setIsSubmit(true);
};
useEffect(() => {
console.log(formErrors);
if (Object.keys(formErrors).length === 0 && isSubmit) {
console.log(formValues);
}
}, [formErrors]);
const validate = (values) => {
const errors = {};
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i;
if (!values.username) {
errors.username = "Username is required!";
}
if (!values.email) {
errors.email = "Email is required!";
} else if (!regex.test(values.email)) {
errors.email = "This is not a valid email format!";
}
if (!values.username) {
errors.username= "usernameis required";
} else if (values.username.length < 4) {
errors.username= "username must be more than 4 characters and combination of 3 letters";
} else if (values.username.length > 10) {
errors.username= "username cannot exceed more than 10 characters";
}
return errors;
};
return (
<div className="container">
<pre>{JSON.stringify(formValues, undefined, 2)}</pre>
<Form onSubmit = { handleSubmit }>
<h1> Payment Validation Form</h1>
<Row className="mb-3">
<Form.Group as={Col} controlId="formGridUsername">
<Form.Label>User Name</Form.Label>
<Form.Control type="text" placeholder="Enter User Name" value={ formValues.username}
onChange = {handleChange}/>
</Form.Group>
<Form.Group as={Col} controlId="formGridEmail">
<Form.Label>Email</Form.Label>
<Form.Control type="email" placeholder="Enter email" value={ formValues.email}
onChange = {handleChange} />
</Form.Group>
<Form.Group as={Col} controlId="formGridPhone">
<Form.Label>phonenumber</Form.Label>
<Form.Control type="number" placeholder="Enter email" value={ formValues.phonenumber}
onChange = {handleChange} />
</Form.Group>
</Row>
<Form.Group className="mb-3" controlId="formGridAddress1">
<Form.Label>Address</Form.Label>
<Form.Control placeholder="1234 Main St" />
</Form.Group>
<Form.Group className="mb-3" controlId="formGridAddress2">
<Form.Label>Address 2</Form.Label>
<Form.Control placeholder="Apartment, studio, or floor" />
</Form.Group>
<Row className="mb-3">
<Form.Group as={Col} controlId="formGridCity">
<Form.Label>City</Form.Label>
<Form.Control />
</Form.Group>
<Form.Group as={Col} controlId="formGridState">
<Form.Label>State</Form.Label>
<Form.Select defaultValue="Choose...">
<option>Choose...</option>
<option>Stockholm</option>
<option>Mälmo</option>
</Form.Select>
</Form.Group>
<Form.Group as={Col} controlId="formGridZip">
<Form.Label>Zip</Form.Label>
<Form.Control />
</Form.Group>
</Row>
<Form.Group className="mb-3" id="formGridCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</div>
);
}
export default AddressValidation
您需要将 name 属性 添加到您的输入中。否则你会从 event.target:
得到一个空名称 属性<Form.Control
name="username"
type="text"
placeholder="Enter User Name"
value={formValues.username}
onChange={handleChange}
/>
您的验证似乎有效。当我尝试提交时,我可以在控制台中看到错误消息:
{username: 'usernameis required', email: 'Email is required!'}