如何在反应中对表单实现两种验证方法？

Question

我有一个项目只允许我更改此文件（下面的文件）。其他文件是完整的，因此，我不把这些放在这里（也不要加长代码）。我的问题只是关于此文件中验证的两种方法的实现。

命令：

第一次聚焦输入时不会显示错误，直到从输入中获得聚焦。如果有错误，它会显示。 下一次，如果遇到错误，同时显示。

我从上面的命令中实现了第一部分，如何在同一个文件中实现第二部分？用 'useEffect'?如何？感谢您的帮助。

input.js

import {useState} from "react";
import {validate} from './validators';

const INPUT_STATES = { /*this is not used!*/
  UNTOUCHED: 'UNTOUCHED',
  VALID: 'VALID',
  INVALID: 'INVALID'
};

const myValidate= validate; /*validate is the my validation function*/

const Input = props => {
   const [value,setValue] = useState('');
   const [validate,setValidate] = useState(true);

   const handleChange = (e) => {
       setValue(e.target.value);
   }

   const handleValidate = () => {
       const Validate = myValidate(value,props.validators);
       setValidate(Validate);
   }

   return (
     <div className={`form-input ${validate ? '' : 'form-input--invalid'}`} data-testid="form-input">
       <label htmlFor={props.id}>{props.label}</label>
       <input value={value} type={props.type} id={props.id} onChange={handleChange} onBlur={handleValidate} />
       <p>{validate ? '' : props.errorText}</p>
     </div>
   )
};

export default Input;

Answer 1

我通过在 handleChange 和 handleValidate 中添加 两个 If 解决了上述问题。另外，我定义了另一个 useState.

此外，我将 myValidate 的第一个参数从 value 更改为 e.target.value.

input.js:

import React from "react";
import {useState} from "react";
import {validate} from './validators';/*This file is cantains validation rulles.*/

const myValidate = validate; /*validate is the my validation function*/
const Input = props => {
   const [value,setValue] = useState('');
   const [validate,setValidate] = useState(true);
   const [valid,setValid] = useState('VALID');

   const handleChange = (e) => {
       setValue(e.target.value);
       if(valid === 'INVALID'){
           handleValidate(e);
       }
   }
   const handleValidate = (e) => {
       const Validate = myValidate(e.target.value,props.validators);
       setValidate(Validate);
       if(!Validate){
           setValid('INVALID');
       }
   }
   return (
     <div className={`form-input ${validate ? '' : 'form-input--invalid'}`} data-testid="form-input">
       <label htmlFor={props.id}>{props.label}</label>
       <input value={value} type={props.type} id={props.id} onChange={handleChange} onBlur={handleValidate} />
       <p>{validate ? '' : props.errorText}</p>
     </div>
   )
};

export default Input;

现在：

第一次聚焦输入时不会显示错误，直到从输入中获得聚焦。如果有错误，它会显示。下一次，如果遇到错误，则在更改过程中会显示相同的时间。

如何在反应中对表单实现两种验证方法？

How to implement two methodes from validation on a form in the react?

javascript

validation

reactjs

react-hooks