Kentavr16
@Kentavr16
long cold winter

Как правильно задать кастомную валидацию формы в react-bootstrap?

Имею затык с кастомной валидацией формы. недавно начал возиться с реакт-бутстрап. Вот мой компонент-форма.

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>
)
}


Как сюда встроить кастомную валидацию? Интересует простая проверка на идентичность полей "пароль" и "проверка пароля".
  • Вопрос задан
  • 180 просмотров
Решения вопроса 1
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы