对于“注册”页面，我需要验证年龄是否等于或大于 18 岁。我尝试过使用类似的示例，但都要求我安装依赖项。我正在寻找一种通过 React 达到预期结果的方法。我的代码如下
注册.jsx
import React from "react";
import { useState, useRef } from "react";
import { BsFillInfoCircleFill } from "react-icons/bs";
import Tooltip from "react-bootstrap/Tooltip";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import { Link } from "react-router-dom";
import Alert from 'react-bootstrap/Alert'
import { UserAuth } from "../../AuthContext";
const Password = (props) =>
{
const [passwordShown, setPasswordShown] = useState(false);
const togglePassword = () => {
setPasswordShown(!passwordShown);
}
return(
<div className="input-group w-75 mb-5">
<input
type= {passwordShown ? 'text' : 'password'}
ref = {props.myRef}
className="form-control shadow-none"
placeholder="PSU1>OSU!"
aria-describedby="button-addon2"
></input>
<button onClick={togglePassword}>Show Password</button>
</div>
);
}
const SignUpPopup = (props) => {
//input fields
const firstName = useRef("");
const lastName = useRef("");
const email = useRef("");
const DOB = useRef("");
const password = useRef("");
const passwordConfirm = useRef("");
const [checked1, setChecked1] = useState(false);
const [checked2, setChecked2] = useState(false);
var errorMessage = ""
//change handlers
const handleChange1 = () => { setChecked1(!checked1) } ;
const handleChange2 = () => { setChecked2(!checked2) } ;
const [error, setError] = useState("");
const {createUser} = UserAuth();
//IMPROVE THE CHECKING OF THE FORM
function checkSignUp(){
var success = true
if (firstName.current.value === ""){
success = false
errorMessage += "Invalid first name\n"
}
if (lastName.current.value === ""){
success = false
errorMessage += "Invalid last name\n"
}
if (email.current.value === ""){
success = false
errorMessage += "Invalid email\n"
}
if (password.current.value === "" ){
success = false
errorMessage += "Invalid password\n"
}
if (!(passwordConfirm.current.value === password.current.value ) ){
success = false
errorMessage += "Passwords do not match\n"
}
return success;
}
async function addUserToDatabase(uid){
fetch("URL",{
method: "POST",
headers: { "Content-Type": "application/json"},
body: uid
})
}
async function handleSignup() {
setError("")
//if res == true, success, else failure and trigger alert
var res = checkSignUp();
if(res){
//authenticate
try{
await createUser(email.current.value, password.current.value);
const {user} = UserAuth();
addUserToDatabase(user.uid);
props.handleClose();
props.signupNextFunc();
}
catch(e){
errorMessage += "Invalid email or password"
setError(errorMessage)
}
}
}
const changeToLogin = ()=>{
props.handleClose()
props.loginFunc()
}
return (
<div className="popup-box">
<div className="box">
<div className="upperwrapper">
<span className="close-icon" onClick={props.handleClose}>
x
<input
type="text"
ref={firstName}
className="form-control shadow-none"
placeholder="Ben"
aria-describedby="button-addon2"
></input>
</div>
{/* LAST NAME INPUT */}
<p style={{ fontSize: "20px", marginTop: "15px" }}>
Last Name<span className="required-field"></span>
</p>
<div className="input-group w-75 mb-5">
<input
type="text"
ref = {lastName}
className="form-control shadow-none"
placeholder="Dover"
aria-describedby="button-addon2"
></input>
</div>
{/* EMAIL INPUT */}
<p style={{ fontSize: "20px", marginTop: "45px" }}>
Email<span className="required-field"></span>
</p>
<div className="input-group w-75 mb-5">
<input
type="text"
ref = {email}
className="form-control shadow-none"
placeholder="[email protected]"
aria-describedby="button-addon2"
></input>
</div>
<div className="d-flex bd-highlight mb-3 example-parent">
<p style={{ fontSize: "20px", marginTop: "10px" }}>
Date of Birth<span className="required-field"></span>
</p>
<div style={{ display: 'block', marginLeft: "-3px", marginTop: "-8px" }}
className="align-self-center p-2 bd-highlight col-example">
<OverlayTrigger
delay={{ hide: 450, show: 300 }}
overlay={(props) => (
<Tooltip {...props}>
Please provide your date of birth to validate...
</Tooltip>
)}
placement="right"
>
<div><BsFillInfoCircleFill /></div>
</OverlayTrigger>
</div>
</div>
<div className="input-group w-75 mb-5">
<input
type="date"
ref={DOB}
className="form-control shadow-none"
placeholder="mm/dd/yyyy"
aria-describedby="button-addon2"
></input>
</div>
)
}； 导出默认 SignUpPopup；
非常感谢任何正确道路的帮助或指导！
您可以在输入的
onChangeconst onChange = (e) => {
const currentYear = new Date().getFullYear();
const year = e.target.value.split("-")[0];
const age = currentYear - year;
if (age < 18) setError("Invalid age");
}
<input
type="date"
className="form-control shadow-none"
placeholder="mm/dd/yyyy"
aria-describedby="button-addon2"
onChange={onChange}
/>
我需要验证年龄是否等于或大于 13 岁。我尝试过使用类似的示例，但都要求我安装依赖项。我正在寻找一种通过 React 达到预期结果的方法。我的代码如下..这是一个表单页面，您将填写并将其保存在本地存储和表格中...
import React, { useState, useEffect } from 'react';
import { Row, Col } from 'react-bootstrap';
import './Form1.css';
function Form1() {
const [formData, setFormData] = useState({
name: '',
email: '',
file: null,
number: '',
DOB: '',
gender: '',
username: '',
password: '',
repassword: '',
city: '',
state: '',
zip: '',
country: '',
address: ''
});
const [errorMessage, setErrorMessage] = useState({});
const [submissions, setSubmissions] = useState([]);
const [isEditing, setIsEditing] = useState(false);
const [currentEditIndex, setCurrentEditIndex] = useState(null);
const calculateAge = (dob) => {
const birthDate = new Date(dob);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDifference = today.getMonth() - birthDate.getMonth();
if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
return age;
};
const validateField = (name, value) => {
let error = '';
const nameRegex = /^[A-Za-z\s]{2,50}$/;
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const phoneRegex = /^[6-9]\d{9}$/;
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
const usernameRegex = /^[a-zA-Z0-9]{3,20}$/;
const addressRegex = /^[a-zA-Z0-9\s,.-]{5,100}$/;
const zipRegex = /^[1-9][0-9]{5}$/;
const cityRegex = /^[A-Za-z\s.]{3,30}$/;
const stateRegex = /^[A-Za-z\s.]{2,20}$/;
const countryRegex = /^[A-Za-z\s.]{2,60}$/;
switch (name) {
case 'name':
if (!value) {
error = 'Name is required!';
} else if (!nameRegex.test(value)) {
error = 'Please enter a valid name (2-50 alphabetic characters).';
}
break;
case 'email':
if (!value) {
error = 'Email is required!';
} else if (!emailRegex.test(value)) {
error = 'Please enter a valid email address.';
}
break;
case 'file':
if (!value) {
error = 'File is required';
} else if (!['image/jpeg', 'image/png'].includes(value.type) || value.size > 5 * 1024 * 1024) {
error = 'Please upload a valid file (jpg/png) with size up to 5MB.';
}
break;
case 'number':
if (!value) {
error = 'Please enter a valid number!';
} else if (!phoneRegex.test(value)) {
error = 'Please enter a valid Indian phone number (10 digits).';
}
break;
case 'DOB':
if (!value) {
error = 'Please enter your date of birth';
} else if (calculateAge(value) < 13) {
error = 'You must be at least 13 years old.';
}
break;
case 'gender':
if (!value) {
error = 'Please select your gender';
}
break;
case 'username':
if (!value) {
error = 'Username is required!';
} else if (!usernameRegex.test(value)) {
error = 'Please enter a valid username (3-20 alphanumeric characters).';
}
break;
case 'password':
if (!value) {
error = 'Password is required';
} else if (!passwordRegex.test(value)) {
error = 'Password must be at least 8 characters long and include at least one uppercase letter, one lowercase letter, one number, and one special character.';
}
break;
case 'repassword':
if (value !== formData.password) {
error = 'Passwords do not match.';
}
break;
case 'city':
if (!value) {
error = 'Please enter your city.';
} else if (!cityRegex.test(value)) {
error = 'Please enter a valid city name (3-30 alphabetic characters).';
}
break;
case 'state':
if (!value) {
error = 'Please enter your state or province.';
} else if (!stateRegex.test(value)) {
error = 'Please enter a valid state name (2-20 alphabetic characters).';
}
break;
case 'zip':
if (!value) {
error = 'Zip/Postal is required';
} else if (!zipRegex.test(value)) {
error = 'Please enter a indian Zip/Postal code maxRange (6 digit).';
}
break;
case 'country':
if (!value) {
error = 'Please enter your country.';
} else if (!countryRegex.test(value)) {
error = 'Please enter a valid country name (2-60 alphabetic characters).';
}
break;
case 'address':
if (!value) {
error = 'Please enter a valid address.';
} else if (!addressRegex.test(value)) {
error = 'Please enter a valid address (5-100 alphanumeric characters).';
}
break;
default:
break;
}
return error;
};
const handleChange = (e) => {
const { name, value, type, files } = e.target;
const newValue = type === 'file' ? files[0] : value;
setFormData({
...formData,
[name]: newValue
});
const error = validateField(name, newValue);
setErrorMessage({
...errorMessage,
[name]: error
});
};
const validateForm = (values) => {
const errors = {};
for (let field in values) {
const error = validateField(field, values[field]);
if (error) {
errors[field] = error;
}
}
return errors;
};
const handleSubmit = (e) => {
e.preventDefault();
const errors = validateForm(formData);
if (Object.keys(errors).length === 0) {
if (isEditing) {
const updatedSubmissions = submissions.map((submission, index) =>
index === currentEditIndex ? formData : submission
);
setSubmissions(updatedSubmissions);
localStorage.setItem('submissions', JSON.stringify(updatedSubmissions));
setIsEditing(false);
setCurrentEditIndex(null);
} else {
const updatedSubmissions = [...submissions, formData];
setSubmissions(updatedSubmissions);
localStorage.setItem('submissions', JSON.stringify(updatedSubmissions));
}
alert('Form submitted successfully!');
handleReset();
} else {
setErrorMessage(errors);
}
};
const handleReset = () => {
setFormData({
name: '',
email: '',
file: null,
number: '',
DOB: '',
gender: '',
username: '',
password: '',
repassword: '',
city: '',
state: '',
zip: '',
country: '',
address: ''
});
setErrorMessage({});
};
const handleEdit = (index) => {
setFormData(submissions[index]);
setIsEditing(true);
setCurrentEditIndex(index);
};
const handleDelete = (index) => {
const updatedSubmissions = submissions.filter((_, i) => i !== index);
setSubmissions(updatedSubmissions);
localStorage.setItem('submissions', JSON.stringify(updatedSubmissions));
};
useEffect(() => {
const savedSubmissions = JSON.parse(localStorage.getItem('submissions'));
if (savedSubmissions) {
setSubmissions(savedSubmissions);
}
}, []);
return (
<>
<div className="App">
<h1>Form</h1>
<fieldset>
<form onSubmit={handleSubmit}>
<Row className="">
<Col xs={12}>
<Row className="g-3 mb-6">
<Col sm={6} md={6}>
<label htmlFor="name">Name*</label>
<input type="text" name="name" id="name" placeholder="Enter Your Name"
value={formData.name} onChange={handleChange} required />
{errorMessage.name && <p className="error text-danger">{errorMessage.name}</p>}
</Col>
<Col sm={6} md={6}>
<label htmlFor="email">Email*</label>
<input type="email" name="email" id="email" placeholder="Enter Your Email"
value={formData.email} onChange={handleChange} required />
{errorMessage.email && <p className="error text-danger">{errorMessage.email}</p>}
</Col>
</Row>
<Row className="g-3 mb-6">
<Col sm={6} md={6}>
<label htmlFor="file">File*</label>
<input type="file" name="file" id="file"
onChange={handleChange} required />
{errorMessage.file && <p className="error text-danger">{errorMessage.file}</p>}
</Col>
<Col sm={6} md={6}>
<label htmlFor="number">Number*</label>
<input type="number" name="number" id="number" placeholder="Enter Your Number"
value={formData.number} onChange={handleChange} required />
{errorMessage.number && <p className="error text-danger">{errorMessage.number}</p>}
</Col>
</Row>
<Row className="g-3 mb-6">
<Col sm={6} md={6}>
<label htmlFor="DOB">DOB*</label>
<input type="date" name="DOB" id="DOB" placeholder="Date of Birth"
value={formData.DOB} onChange={handleChange} required />
{errorMessage.DOB && <p className="error text-danger">{errorMessage.DOB}</p>}
</Col>
<Col sm={6} md={6}>
<label htmlFor="username">Username*</label>
<input type="text" name="username" id="username" placeholder="Enter Your Username"
value={formData.username} onChange={handleChange} required />
{errorMessage.username && <p className="error text-danger">{errorMessage.username}</p>}
</Col>
</Row>
<Row className="g-3 mb-6">
<Col sm={6} md={6}>
<label htmlFor="password">Password*</label>
<input type="password" name="password" id="password" placeholder="Enter Your Password"
value={formData.password} onChange={handleChange} required />
{errorMessage.password && <p className="error text-danger">{errorMessage.password}</p>}
</Col>
<Col sm={6} md={6}>
<label htmlFor="repassword">Re-Enter Password*</label>
<input type="password" name="repassword" id="repassword" placeholder="Re-Enter Your Password"
value={formData.repassword} onChange={handleChange} required />
{errorMessage.repassword && <p className="error text-danger">{errorMessage.repassword}</p>}
</Col>
</Row>
<Row className="g-3 mb-6">
<Col sm={6} md={6}>
<label htmlFor="city">City*</label>
<input type="text" name="city" id="city" placeholder="Enter Your City"
value={formData.city} onChange={handleChange} required />
{errorMessage.city && <p className="error text-danger">{errorMessage.city}</p>}
</Col>
<Col sm={6} md={6}>
<label htmlFor="state">State*</label>
<input type="text" name="state" id="state" placeholder="Enter Your State"
value={formData.state} onChange={handleChange} required />
{errorMessage.state && <p className="error text-danger">{errorMessage.state}</p>}
</Col>
</Row>
<Row className="g-3 mb-6">
<Col sm={6} md={6}>
<label htmlFor="zip">Zip/Postal Code*</label>
<input type="text" name="zip" id="zip" placeholder="Enter Your Zip/Postal Code"
value={formData.zip} onChange={handleChange} required />
{errorMessage.zip && <p className="error text-danger">{errorMessage.zip}</p>}
</Col>
<Col sm={6} md={6}>
<label htmlFor="country">Country*</label>
<input type="text" name="country" id="country" placeholder="Enter Your Country"
value={formData.country} onChange={handleChange} required />
{errorMessage.country && <p className="error text-danger">{errorMessage.country}</p>}
</Col>
</Row>
<Row className="g-3 mb-6">
<label htmlFor="gender">Gender*</label>
<input type="radio" name="gender" id="male" value="Male"
checked={formData.gender === 'Male'} onChange={handleChange} required /> Male
<input type="radio" name="gender" id="female" value="Female"
checked={formData.gender === 'Female'} onChange={handleChange} required /> Female
<input type="radio" name="gender" id="other" value="Other"
checked={formData.gender === 'Other'} onChange={handleChange} required /> Other
{errorMessage.gender && <p className="error text-danger">{errorMessage.gender}</p>}
<Col sm={6} md={12}>
<label htmlFor="address">Address*</label>
<input type="text" name="address" id="address" placeholder="Enter Your Address"
value={formData.address} onChange={handleChange} required />
{errorMessage.address && <p className="error text-danger">{errorMessage.address}</p>}
</Col>
</Row>
<Row className="g-3 mb-6">
<Col sm={6} md={6}>
<button type="button" onClick={handleReset}>Reset</button>
</Col>
<Col sm={6} md={6}>
<button type="submit">{isEditing ? 'Update' : 'Submit'}</button>
</Col>
</Row>
</Col>
</Row>
</form>
</fieldset>
</div>
<br /><br />
<div className='contain-table'>
<table className="table table-striped">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Email</th>
<th>Phone No.</th>
<th>DOB</th>
<th>Gender</th>
<th>UserName</th>
<th>City</th>
<th>Country</th>
<th colSpan={2} className="text-center">Actions</th>
</tr>
</thead>
<tbody>
{submissions.map((submission, index) => (
<tr key={index}>
<td>{index + 1}</td>
<td>{submission.name}</td>
<td>{submission.email}</td>
<td>{submission.number}</td>
<td>{submission.DOB}</td>
<td>{submission.gender}</td>
<td>{submission.username}</td>
<td>{submission.city}</td>
<td>{submission.country}</td>
<td className="text-left">
<button onClick={() => handleEdit(index)} className="button">Edit</button>
<button onClick={() => handleDelete(index)} className="button">Delete</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
</>
);
}
export default Form1;
// 有姓名、用户名、电子邮件、密码、重新密码、性别、出生日期、城市、国家、州、邮政编码/邮政、地址、文件、电话号码并保存到您的表格中并想要编辑或删除您填写表格，如果有任何错误，它会显示错误...并且您填写错误的任何内容，表格将不会提交...