如何对导致验证错误的特定输入字段进行setErrorValidation？
如何对导致验证错误的特定输入字段进行setErrorValidation？
提问于 2022-09-15 13:53:07
我试图做的是将错误验证消息放在空的输入字段下。
会显示错误验证，但问题是，对于组件上存在的每个输入表单，而不是空的输入表单，都会显示错误验证。
const [user, setUser] = useState({
firstName: "",
lastName: "",
email: "",
});
const [errorMsg, setErrorMsg] = useState("");
const handleItemChanged = (event) => {
const { name, value } = event.target;
console.log(name, value);
setUser({ ...user, [name]: value });
const regex = /^[A-Za-z0-9_-]{1,128}$/;
if (regex.test(value) === false) {
setErrorMsg(
"The field is empty"
);
} else {
setErrorMsg("");
}
};
return(
<div>
<div>
<label
htmlFor="firstName"
>
First Name
</label>
<div>
<input
type="text"
name="firstName"
onChange={(event) => handleItemChanged(event)}
autoComplete="off"
/>
{errorValidation && (
<div className="text-color-error">
<label htmlFor="username" className="block"></label>
<div className="sm:col-span-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="inline-block mr-2 h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116
0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1
0 102 0V6a1 1 0 00-1-1z"
clipRule="evenodd"
/>
</svg>{" "}
{errorValidation}
{""}
</div>
</div>
)}
</div>
</div>
<div>
<label
htmlFor="lastName"
>
Last Name
</label>
<div>
<input
type="text"
name="lastName"
onChange={(event) => handleItemChanged(event)}
autoComplete="off"
/>
{errorValidation && (
<div className="text-color-error">
<label htmlFor="username" className="block"></label>
<div className="sm:col-span-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="inline-block mr-2 h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116
0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1
0 102 0V6a1 1 0 00-1-1z"
clipRule="evenodd"
/>
</svg>{" "}
{errorValidation}
{""}
</div>
</div>
)}
</div>
</div>
...
</div>
);所以，如果名字是空的，姓氏不是空的，电子邮件不是空的，错误信息将显示在名字，姓氏和电子邮件输入下面。我想要的是错误消息只显示在空输入(本例中的名字输入)下。
我该怎么解决呢？
回答 1
Stack Overflow用户
发布于 2022-09-15 14:30:30
您可以通过创建一个保存键值对的对象来做到这一点，其中键是具有错误的input的名称，值是错误消息。这样，您就可以将有错误的部分和没有错误的部分分开。
示例：
const [errorMsg, setErrorMsg] = useState({
emailError: "",
userError: "",
});在处理错误时，可以使用event.target标识创建错误的组件，并设置其错误消息，同时保留其他内容：
const [user, setUser] = useState({
firstName: '',
lastName: '',
email: '',
});
const [errorMsg, setErrorMsg] = useState({
firstName: '',
lastName: '',
email: '',
});
const handleItemChanged = (event) => {
const { name, value } = event.target;
console.log(name, value);
setUser({ ...user, [name]: value });
const regex = /^[A-Za-z0-9_-]{1,128}$/;
if (regex.test(value) === false) {
setErrorMsg({ ...errorMsg, [name]: 'The field is empty' });
}
console.log(errorMsg)
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73732412
复制相关文章
相似问题
腾讯云开发者
