Имею затык с кастомной валидацией формы. недавно начал возиться с реакт-бутстрап. Вот мой компонент-форма.
import React, { useState } from'react'
import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'
import "./regform.css"
export default function RegForm(){
const [login,setLogin] = useState();
const[password,setPassword] = useState();
const [checkPass,setCheckPass] = useState();
const[validated,setValidated] = useState(false);
function handleLoginInput(e){
setLogin(e.target.value)
}
function handlePasswordInput(e){
setPassword(e.target.value)
}
function handleCheckPasswordInput(e){
setCheckPass(e.target.value)
}
function onSub(e){
e.preventDafault();
//здесь я так понимаю должен быть код для валидатора
}
return(
<div className='formwrapper'>
<h2>Форма регистрации</h2>
<Form className='container' noValidate validated={validated}>
<Form.Group className="mb-5" controlId="formBasicEmail">
<Form.Label>Задайте логин</Form.Label>
<Form.Control type="email" onChange={(e)=>{handleLoginInput(e)}} placeholder="Введите логин" required />
</Form.Group>
<Form.Group className="mb-5" controlId="formBasicPassword">
<Form.Label>Задайте пароль</Form.Label>
<Form.Control type="password" onChange={(e)=>{handlePasswordInput(e)}} placeholder="поле для пароля" required/>
</Form.Group>
<Form.Group className="mb-5" controlId="formBasicPassword">
<Form.Label>Введите пароль для проверки еще раз</Form.Label>
<Form.Control type="password" onChange={(e)=>{handleCheckPasswordInput(e)}} placeholder="поле для проверки пароля" required />
</Form.Group>
<Button variant="primary" type='submit' onClick={(e)=>{onSub(e)}}>
подтвердить
</Button>
</Form>
</div>
)
}
Как сюда встроить кастомную валидацию? Интересует простая проверка на идентичность полей "пароль" и "проверка пароля".