验证 javascript 中的电子邮件输入答案

【问题标题】：validating an email input in javascript验证 javascript 中的电子邮件输入
【发布时间】：2019-08-08 15:42:37
【问题描述】：

您好，我创建了一个函数来检查用户输入的格式。但是，如果格式错误，我不知道如何打印消息。

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 中的数据库。

【问题讨论】：

我想你应该做的是禁用提交按钮，直到所有字段都有效，如果任何字段无效，你可能应该告诉用户该字段无效。例如“输入有效的电子邮件地址”

标签： javascript reactjs forms input

【解决方案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

【讨论】：