大型表单的React验证

Question

我正在开发一个具有简单表单(Login(的React应用程序，并希望进行UI验证。对于一个简单的电子邮件和密码，我可以使用以下代码，但如果我有一个8-10个字段的表单会怎么样。我应该仍然在验证函数中验证它，还是会让我的组件变得更大、更乱。在这些情况下，在React中验证大型表单的推荐方法是什么？

function Login() {
const [userLogin, setUserLogin] = useState({})
const [loginFormErrors, setLoginFormErrors] = useState({})
const [isValid, setIsValid] = useState(false)
const handleChange = (e) => {
// code here 
}
useEffect(() => {
// if loginFormErrors is an empty object then submit the form 
if(Object.keys(loginFormErrors).length == 0 && isValid) {
console.log('Submit the form')
}
}, [loginFormErrors])
const validate = () => {

let errors = {}
if(!userLogin.email) {
errors.email = 'Email is required!'
} else if(!validateEmail(userLogin.email)) {
errors.email = 'Email is not in correct format!'
}
if(!userLogin.password) {
errors.password = 'Password is required!'
}
return errors
}
const handleLogin = () => {
setLoginFormErrors(validate()) 
setIsValid(true)      
}
return (
<div>
<input type = 'text' placeholder='Email' name = 'email' onChange = {handleChange} />
<p>{loginFormErrors.email}</p>
<input type = 'password' placeholder='Password' name = 'password' onChange = {handleChange} />
<p>{loginFormErrors.password}</p>
<button onClick = {handleLogin}>Login</button>
</div>
)
}

附言：我从一个在线样本中得到了这个代码

Answer 1

在这些情况下，使用验证库可以使表单验证更容易、更强大。我建议您使用react可验证表单。

你可以看看这个沙盒，看看类似于你的表单的用法示例

首先，您需要将应用程序包装在ReactValidatableFormProvider中，如：

import { ReactValidatableFormProvider } from "react-validatable-form";
import "./styles.css";
import Login from "./Login";
export default function App() {
return (
<ReactValidatableFormProvider
hideBeforeSubmit={true}
showAfterBlur={true}
focusToErrorAfterSubmit={true}
>
<div className="App">
<h1>react-validatable-form Example</h1>
<Login />
</div>
</ReactValidatableFormProvider>
);
}

然后使用CCD_ 3钩子来处理CCD_。

import { useValidatableForm } from "react-validatable-form";
const rules = [
{ path: "email", ruleSet: [{ rule: "required" }, { rule: "email" }] },
{ path: "password", ruleSet: [{ rule: "required" }] }
];
const Login = () => {
const {
isValid,
getValue,
getError,
setPathValue,
setPathIsBlurred,
setFormIsSubmitted,
formData
} = useValidatableForm({ rules: rules });
const handleLogin = () => {
setFormIsSubmitted(true);
if (isValid) {
alert(
"form is valid and submmitted, email=" +
formData.email +
" password=" +
formData.password
);
}
};
return (
<div>
<input
type="text"
placeholder="Email"
id="email"
value={getValue("email")}
onChange={(e) => setPathValue("email", e.target.value)}
onBlur={() => setPathIsBlurred("email")}
/>
<p>{getError("email")}</p>
<input
type="password"
placeholder="Password"
id="password"
value={getValue("password")}
onChange={(e) => setPathValue("password", e.target.value)}
onBlur={() => setPathIsBlurred("password")}
/>
<p>{getError("password")}</p>
<button onClick={handleLogin}>Login</button>
{"isValid = " + isValid}
</div>
);
};
export default Login;