在React中为html输入添加输入验证

Question

有此输入：

const REGEX_EMAIL_VALIDATION = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
...
<input
pattern={REGEX_EMAIL_VALIDATION}
type="email"
value={field.value || ''}
onChange={(e) => handleChangeEmail(id, e)}
/>

我试过这样做，但它似乎允许任何输入，它无法验证模式。

如果值不正确，我希望在用户键入输入时显示一条消息。在这种情况下-如果它没有电子邮件形状。

Answer 1

您可以根据对正则表达式(RegEx.test(value) ? true : false(的测试条件呈现错误消息。

import { useState } from "react";
export default function App() {
const [email, setEmail] = useState(""); // state value for email
const REGEX_EMAIL_VALIDATION = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
const handleEmailChange = (e) => {
setEmail(e.target.value); // set email to value from input
}

// render
return (
<div>
<input name="email" value={email} onChange={handleEmailChange}></input>
{
REGEX_EMAIL_VALIDATION.test(email) ? <small>valid</small> : <small>invalid</small>
}
<p>{email}</p>
</div>
);
}

在这个沙盒里试试。

Answer 2

请尝试此

const re =
/^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
const handleOnChange = (e) => {
if (re.test(e.target.value)) {
// this is a valid email address
// call setState({email: email}) to update the email
// or update the data in redux store.
} else {
// invalid email, maybe show an error to the user.
}
};