在ReactJS中使用regex进行输入字段验证

Question

我已经在ReactJS中创建了一个基本的验证表单，使用正常条件来验证输入字段。

现在，我想使用正则表达式来验证输入字段，而不是像下面那样使用基本条件。

我现在的代码是:

import React, { useState } from 'react';
import { Button, Form } from 'semantic-ui-react'
import axios from 'axios';
import { useNavigate, NavLink } from 'react-router-dom';
import Swal from 'sweetalert2';
function Create() {
let navigate = useNavigate();
const [password, setPassword] = useState('');
const [email, setEmail] = useState('');
const [companyNumber, setCompanyNumber] = useState('');;
const postData = () => {
const url = `https://62c45bb0abea8c085a73b996.mockapi.io/Reactcrud`
if(password.length <= 4){
return Swal.fire({
icon: 'error',
title: 'Error',
text: 'password must contain atleast 4 digits',
showConfirmButton: true
})
}else if(companyNumber.length !== 10){
return Swal.fire({
icon: 'error',
title: 'Error',
text: 'mobile number should be a 10 digit number',
showConfirmButton: true
})
}else{
axios.post(url, {
password,
email,
companyNumber,
})

.then(() => {
navigate('/company/list');
})
}

}
const goBack = () =>{
navigate("/company/list")
} 
return (
<div className='container-fluid'>
<div className='row'>
<div className='col-lg-4'></div>
<div className='text-black align-content-center col-lg-5 '>
<Form className="create-form">
<Form.Field>
<label>Password</label>
<input  placeholder='enter password' onChange={(e) => setPassword(e.target.value)}/>
</Form.Field>
<Form.Field>
<label>Email Address</label>
<input  placeholder='Email' onChange={(e) => setEmail(e.target.value)}/>
</Form.Field>
<Form.Field>
<label>Company Mobile Number</label>
<input  placeholder='Company Number' onChange={(e) => setCompanyNumber(e.target.value)}/>
</Form.Field>
<Button color="blue" onClick={postData} type='submit'>Submit</Button>
<Button color="red" onClick={goBack}>
Cancel
</Button>
</Form>
</div>
</div>
</div>
)
}
export default Create;

在上面的手机号码验证和密码验证代码中，我添加了输入为10位数字的条件。

现在我想用这个正则表达式来验证手机号码验证:

const regex1 = /^(+91[-s]?)?[0]?(91)?[789]d{9}$/;

密码验证:

const regex2 = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{4,12}$/;

因此，您可以看到，我已经使用了一个基本条件来验证输入字段，现在我想添加一个正则表达式来根据正则表达式验证密码字段和手机号码字段。

请根据我想使用正则表达式的要求帮助我实现验证工作。

Answer 1

我已经改变了else if语句中的条件，如下所示，它成功了。

import React, { useState } from 'react';
import { Button, Form } from 'semantic-ui-react'
import axios from 'axios';
import { useNavigate, NavLink } from 'react-router-dom';
import Swal from 'sweetalert2';
function Create() {
let navigate = useNavigate();
const [password, setPassword] = useState('');
const [email, setEmail] = useState('');
const [companyNumber, setCompanyNumber] = useState('');;
const postData = () => {
const url = `https://62c45bb0abea8c085a73b996.mockapi.io/Reactcrud`
const regex = /^(+91[-s]?)?[0]?(91)?[789]d{9}$/;
if(password.length <= 4){
return Swal.fire({
icon: 'error',
title: 'Error',
text: 'password must contain atleast 4 digits',
showConfirmButton: true
})
}else if(!regex.test(companyNumber)){
return Swal.fire({
icon: 'error',
title: 'Error',
text: 'mobile number should be a 10 digit number',
showConfirmButton: true
})
}else{
axios.post(url, {
password,
email,
companyNumber,
})

.then(() => {
navigate('/company/list');
})
}

}
const goBack = () =>{
navigate("/company/list")
} 
return (
<div className='container-fluid'>
<div className='row'>
<div className='col-lg-4'></div>
<div className='text-black align-content-center col-lg-5 '>
<Form className="create-form">
<Form.Field>
<label>Password</label>
<input  placeholder='enter password' onChange={(e) => setPassword(e.target.value)}/>
</Form.Field>
<Form.Field>
<label>Email Address</label>
<input  placeholder='Email' onChange={(e) => setEmail(e.target.value)}/>
</Form.Field>
<Form.Field>
<label>Company Mobile Number</label>
<input  placeholder='Company Number' onChange={(e) => setCompanyNumber(e.target.value)}/>
</Form.Field>
<Button color="blue" onClick={postData} type='submit'>Submit</Button>
<Button color="red" onClick={goBack}>
Cancel
</Button>
</Form>
</div>
</div>
</div>
)
}
export default Create;