Javascript 试图用正则表达式显示无效电子邮件的错误，但可以'；更改后不提交

首先，我不知道我的措辞是否正确。我是一个新的反应，并试图学习如何正确使用挂钩

当我提交时，无论是否有效，我都会收到一个“无效电子邮件”错误

我想能够显示一个无效的电子邮件错误，如果它是一个无效的电子邮件，并希望它消失后，成功提交了有效的电子邮件

我最终也会给密码添加一些条件

import React, {useState} from 'react';
import {Link, useHistory} from 'react-router-dom';


const SignUp = () => {
  const history = useHistory();
  const [name, setName] = useState("")
  const [password, setPassword] = useState("")
  const [email, setEmail] = useState("")
  const [error, setError] = useState("")
  const [message, setMessage] = useState("")


  const PostData = ()=> {
    // adding regex to validate proper email
    if(!/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w\-._~:/?#[\]@!$&'()*+,;=.]+$/.test(email)){
      setError("Invalid email.")
      // added this to close out the whole process if there is an error
      return
    }
    fetch("/signup",{
      method:"post",
      headers:{
          "Content-Type":"application/json"
      },
      body:JSON.stringify({
          name,
          password,
          email,

      })
  }).then(res=>res.json())
    .then(data=>{
      if(data.error){
        setError(data.error)
      }
      else{
        setMessage(data.message)
        history.push('/signin')
      }
    }).catch(err=>{
      console.log(err)
    })
  }

  return(
    <div className="mycard">
      <div className="auth-card">
        <h2>Test</h2>
        <input 
        type="text"
        placeholder="name"
        value={name}
        onChange={(e)=>setName(e.target.value)}
        />
        <input 
        type="text"
        placeholder="email"
        value={email}
        onChange={(e)=>setEmail(e.target.value)}
        />
        <input 
        type="text"
        placeholder="password"
        value={password}
        onChange={(e)=>setPassword(e.target.value)}
        />
        <button className="btn" onClick={()=>PostData()} >
          Sign Up
        </button>

        {/* Show Error or Message */}
        { error && <div style={{color: "red"}}> {error}</div> }
        { message && <div style={{color: "green"}}> {message}</div> }

        <h5>
          <Link to="/signup">Already have an account?</Link>
        </h5>

      </div>
    </div>
  )

}

export default SignUp

import React，{useState}来自“React”；
从“react router dom”导入{Link，useHistory}；
常量注册=（）=>{
const history=useHistory（）；
const[name，setName]=useState（“”）
const[password，setPassword]=useState（“”）
const[email，setEmail]=useState（“”）
常量[error，setError]=useState（“”）
const[message，setMessage]=useState（“”）
常量PostData=（）=>{
//添加正则表达式以验证正确的电子邮件
如果（！/^（？：http（s）？：\/\/）？[\w.-]+（？：\.[\w.-]+）+[\w\-.\u.-：/？\[\]@！$&'（）*+，；=.]+$/测试（电子邮件））{
setError（“无效电子邮件”）
//添加此选项是为了在出现错误时结束整个过程
返回
}
获取（“/signup”{
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”
},
正文：JSON.stringify({
名称
密码，
电子邮件，
})
}).then（res=>res.json（））
。然后（数据=>{
if（data.error）{
setError（data.error）
}
否则{
setMessage（data.message）
history.push（“/sign”）
}
}).catch（错误=>{
console.log（错误）
})
}
返回(
试验
setName（e.target.value）}
/>
setEmail（e.target.value）}
/>
setPassword（e.target.value）}
/>
PostData（）}>
注册
{/*显示错误或消息*/}
{error&&{error}
{message&&{message}
已经有账户了吗？
)
}
导出默认注册

您拥有的正则表达式不验证电子邮件地址，而是某种超链接。在输入上使用，或者更好地使用

type=“email”

（在

中），以便浏览器对其进行验证

另一个问题是，您从未清除

错误

，因此，如果电子邮件在提交时无效，错误不会消失。当电子邮件字段更改时，清除

错误

：

onChange={(e) => { setError(''); setEmail(e.target.value); }}

---

您拥有的正则表达式不验证电子邮件地址，而是某种超链接。在输入上使用，或者更好地使用

type=“email”

（在

中），以便浏览器对其进行验证

另一个问题是，您从未清除

错误

，因此，如果电子邮件在提交时无效，错误不会消失。当电子邮件字段更改时，清除

错误

：

onChange={(e) => { setError(''); setEmail(e.target.value); }}

---

除了上面的答案，一旦你有了正则表达式。您可以使用以下命令验证PostData函数

const PostData = ()=> {
    regex="regex expression"
    //the regex expression for email validation goes here
    if(regex.test(email){
    setTimeOut(()=>{
       setError("Invalid email.")
    }, 3000) //using this will ensure the error message gets cleared after 3 seconds

      }
      else {
      fetch(...)
      }
    }

---

除了上面的答案，一旦你有了正则表达式。您可以使用以下命令验证PostData函数

const PostData = ()=> {
    regex="regex expression"
    //the regex expression for email validation goes here
    if(regex.test(email){
    setTimeOut(()=>{
       setError("Invalid email.")
    }, 3000) //using this will ensure the error message gets cleared after 3 seconds

      }
      else {
      fetch(...)
      }
    }

---

你的正则表达式看起来与电子邮件验证无关-首先修复你的正则表达式与电子邮件验证无关-首先修复我如何用你的语言说“我爱你，非常感谢你”？说真的，感谢你的反馈，你对我很好。我如何用你的语言说“我爱你，非常感谢你”？说真的，感谢你的反馈，你对它很好。