[英]validating an email input in javascript
Hello I have made a function in order to check for the format the user has enter. 您好,我已经设置了一个功能来检查用户输入的格式。 However I do not know how to print a message if the format is wrong.
但是,如果格式错误,我不知道如何打印消息。
function emailIsValid (emailInput) {
//var check = /\S+@\S+\.\S/.test(emailInput);
var 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,}))$/;
if( re.test(String(emailInput).toLowerCase()))
{
return true;
}
}
export default function Contact() {
const [nameInput, setName] = React.useState("");
const [emailInput, setEmail] = React.useState("");
const [messageInput, setMessageInput] = React.useState("");
var emailCheck = emailIsValid(emailInput);
const enables = messageInput.length > 0 && emailInput.length > 0 && nameInput.length > 0 && emailCheck;
return (
<div className="App">
<div className="header">
<div className="logo">
Chavy
</div>
<div className="menu">
<Link className="link" activeonlywhenexact="true" to="/">
<span className="title" style={{cursor:"pointer"}}>Home</span>
<span className="bar"></span>
</Link>
<Link className="link" to="/workSection">
<span className="title" style={{cursor:"pointer"}}>Work</span>
<span className="bar"></span>
</Link>
<Link className="link" to="/contact">
<span className="title" style={{cursor:"pointer"}}>Contact</span>
<span className="bar"></span>
</Link>
</div>
</div>
<div className="container">
<div className="row">
<div className="column">
<img src={logo} style={{height:"500px", width:"600px"}} alt="logo"/>
</div>
<div className="row">
<div className="column column-10"><hr className="style-four"></hr></div>
<p style={{margin:"30px"}}>
---
</p>
<label htmlFor="fname" style={{fontSize:"20px", fontWeight:"200"}}>Full Name:</label>
<br />
<input type="text" id="firstname" placeholder="Your name:"
value={nameInput}
name="name"
onChange={event => {
const value = event.target.value;
setName(value);
}}
required
/>
<br />
<div style={{margin:"30px"}}>
<label htmlFor="lname" style={{fontSize:"20px", fontWeight:"200"}}>Email:</label>
<br />
<input type="email" id="email" placeholder="Your email:"
value={emailInput}
name="email"
onChange={event => {
const value = event.target.value;
setEmail(value);
}}
required
/>
<br />
</div>
<div style={{margin:"30px"}}>
<label htmlFor="textarea" style={{fontSize:"20px", fontWeight:"200"}}>Message:</label>
<br />
<textarea id="message" placeholder="Type your message here:"
value={messageInput}
onChange={event => {
const value = event.target.value;
setMessageInput(value);
}}
name="message"
required
/>
<br />
<Link to="/contactAfter">
<button
disabled={!enables}
onClick={() =>
sendMessage(messageInput,emailInput,nameInput)
}
className="myButton"
name = "messageInput"
>Send Message</button></Link>
</div>
</div>
</div>
whenever the user is done writing his email, I want to not let him send a message if the email has a wrong format. 每当用户写完电子邮件后,如果电子邮件格式错误,我都不要让他发送消息。 This info is being sent to a db in firebase.
此信息被发送到Firebase中的数据库。
You may try this 你可以试试这个
Insert this 插入这个
{!emailCheck && <div className="red">Invalid email address</div>}
right after 之后
<input type="email" id="email" placeholder="Your email:"
value={emailInput}
name="email"
onChange={event => {
const value = event.target.value;
setEmail(value);
}}
required
/>
You may refer to the link https://stackblitz.com/edit/react-email-error 您可以参考链接https://stackblitz.com/edit/react-email-error
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.