Javascript 如何使用useffect（）进行验证

我正在尝试使用useState（）和useffect（）验证表单。

下面是我的useEffect（）方法：

`我对React JS是新手，所以我使用if-else完成了基本的编码。 我在这里停留在概念上，而不是技术上。 我无法验证电子邮件和密码等其他输入字段。如何做到这一点？ 以下是我的验证方法： //在这里，我们运行任何验证，返回true/false

  const formValidation = () => {
    var error = false;
    if (fullName === "") {
      setNameError('Name cant be blank!')
      error = true;
    }

    let regEmail = /^(([^<>()\[\]\\.,;:\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 (!regEmail.test.email) {
      setEmailError('Enter a valid email id')
      error = true;
    }
    if (email === "") {
      setEmailError('Mandatory Field')
      error = true;
    }
    let regPassword = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$/
    if (!regPassword.test.email) {
      // alert("errosdr")
      setPasswordError('Invalid Password Format')
      error = true;
    }

    if (error == true) {
      return true;
    }
    else {
      setNameError(null)
      setEmailError(null)
      setPasswordError(null)
      return false
    }
  }

---

只要在组件中调用set函数，它就会自动重新呈现。因此，在您的例子中，

formValidation

调用

setnamererror

并继续重新呈现，因此没有执行其余代码

在您当前的实现中，发生了以下情况：

• 全名

  ，

  电子邮件

  或

  密码

  已更改
• 调用

  formValidation（）

• 检查是否

  fullName==”

  并调用

  setnamererror（“名称不能为空！”）

• 组件重新渲染
• 函数中的其余逻辑未被调用

为了避免这种情况，您可能希望将错误状态存储在单个状态中：

const [errors, setErrors] = useState({})

最佳做法是在每个组件中创建的每个函数中只调用单个

setState

。理想情况下，它是在某种逻辑之后调用的

下面是一个修改后的

formValidation

const formValidation = () => {
    let newErrors = {}
    if (fullName === "") {
      newErrors.name = 'Name cant be blank!'
    }

    let regEmail = /^(([^<>()\[\]\\.,;:\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 (!regEmail.test.email) {
      newErrors.email = 'Enter a valid email id'
    }
    if (email === "") {
      newErrors.email = 'Mandatory Field'
    }
    let regPassword = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$/
    if (!regPassword.test.email) {
      newErrors.password = 'Invalid Password Format'
    }

    setErrors(newErrors)
  }

const formValidation=（）=>{
让newErrors={}
如果（全名==“”）{
newErrors.name='名称不能为空！'
}
让regEmail=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\\，；：\s@“]+）*（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}]）；（[a-zA Z-0-9]++]；
如果（！regEmail.test.email）{
newErrors.email='输入有效的电子邮件id'
}
如果（电子邮件==“”）{
newErrors.email='必填字段'
}
设regPassword=/^（？=.*\d）（？=.[a-z]）（？=.[a-z]）。{8,15}$/
如果（！regPassword.test.email）{
newErrors.password='密码格式无效'
}
设置错误（新错误）
}

将

Formik

与

yup

库一起使用，以简化表单处理的验证。@adel感谢您的通知。现在，希望以正常的方式进行操作。：）让它成为

{errors.password&&{errors.password}
}

如果有用的话，请把我的答案作为最好的答案，这样对其他读者会有帮助。非常感谢。感谢@blankart的快速响应，已解决！尽管如此，现在处理电子邮件正则表达式的工作并不像预期的那样工作。不过，这个问题已经解决了！：）

const [errors, setErrors] = useState({})

const formValidation = () => {
    let newErrors = {}
    if (fullName === "") {
      newErrors.name = 'Name cant be blank!'
    }

    let regEmail = /^(([^<>()\[\]\\.,;:\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 (!regEmail.test.email) {
      newErrors.email = 'Enter a valid email id'
    }
    if (email === "") {
      newErrors.email = 'Mandatory Field'
    }
    let regPassword = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$/
    if (!regPassword.test.email) {
      newErrors.password = 'Invalid Password Format'
    }

    setErrors(newErrors)
  }