驗證javascript中的電子郵件輸入

Question

您好，我已經設置了一個功能來檢查用戶輸入的格式。 但是，如果格式錯誤，我不知道如何打印消息。

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>

每當用戶寫完電子郵件后，如果電子郵件格式錯誤，我都不要讓他發送消息。 此信息被發送到Firebase中的數據庫。

Answer 1

你可以試試這個

插入這個

{!emailCheck && <div className="red">Invalid email address</div>}

之后

    <input type="email" id="email" placeholder="Your email:"
        value={emailInput}
        name="email"
        onChange={event => {
            const value = event.target.value;
            setEmail(value);
        }}
        required
        />

您可以參考鏈接https://stackblitz.com/edit/react-email-error