Javascript 使用React进行表单验证

我试图创建一个用户注册表单，但遇到了显示表单验证错误的障碍

问题： 1） 在提交没有错误的输入时，输入不再向db发布（axios）。2）错误消息在错误修复后不会消失

旁注：我已经注释掉了firstnamererror、lastnamererror和emailError，只关注passwordError

import React, { Component } from 'react';
import axios from 'axios';
import { Form, Container } from 'react-bootstrap'

export default class RegisterUser extends Component {
  constructor(props) {
    super(props);

    this.onChangeFirstName = this.onChangeFirstName.bind(this);
    this.onChangeLastName = this.onChangeLastName.bind(this);
    this.onChangeEmail = this.onChangeEmail.bind(this);
    this.onChangePassword = this.onChangePassword.bind(this);
    this.onSubmit = this.onSubmit.bind(this);

    this.state = {
      firstName: '',
      lastName: '',
      email: '',
      password: '',
      firstNameError: '',
      lastNameError: '',
      emailError: '',
      passwordError: '',
    }
  }

  onChangeFirstName(e) {
    this.setState({
      firstName: e.target.value
    })
  }

  onChangeLastName(e) {
    this.setState({
      lastName: e.target.value
    })
  }

  onChangeEmail(e) {
    this.setState({
      email: e.target.value
    })
  }

  onChangePassword(e) {
    this.setState({
      password: e.target.value
    })
  }

  validate() {
    // let firstNameError= '';
    // let lastNameError= '';
    //  let emailError= '';
    let passwordError = '';

    if (!this.state.password.length < 6) {
      passwordError = 'Password must be at least 6 characters'
    }

    if (passwordError) {
      this.setState({ passwordError })
      return false
    }

    return true;
  }

  onSubmit(e) {
    e.preventDefault();
    const isValid = this.validate()
    if (isValid) {
      const user = {
        firstName: this.state.firstName,
        lastName: this.state.lastName,
        email: this.state.email,
        password: this.state.password,
      }

      console.log(user);

      axios.post('http://localhost:5001/users/add', user)
        .then(res => console.log(res.data));

      this.setState({
        firstName: '',
        lastName: '',
        email: '',
        password: ''
      })
    }
  }

  render() {
    return (
      <Container>
        <h3>Register</h3>
        <Form onSubmit={this.onSubmit}>
          <Form.Group>
            <Form.Label>First name</Form.Label>
            <Form.Control
              type="text"
              id="firstName"
              required
              value={this.state.firstName}
              onChange={this.onChangeFirstName}
            />
            <div style={{ color: 'red' }}>
              {this.state.firstNameError}
            </div>
          </Form.Group>
          <Form.Group>
            <Form.Label>Last name</Form.Label>
            <Form.Control
              id="lastName"
              type="text"
              required
              value={this.state.lastName}
              onChange={this.onChangeLastName}
            />
          </Form.Group>
          <div style={{ color: 'red' }}>
            {this.state.lastNameError}
          </div>
          <Form.Group>
            <Form.Label>Email</Form.Label>
            <Form.Control
              type="email"
              id="email"
              required
              value={this.state.email}
              onChange={this.onChangeEmail}
            />
          </Form.Group>
          <div style={{ color: 'red' }}>
            {this.state.emailError}
          </div>
          <Form.Group>
            <Form.Label>Password</Form.Label>
            <Form.Control
              type="password"
              id="password"
              required
              value={this.state.password}
              onChange={this.onChangePassword}
            />
          </Form.Group>
          <div style={{ color: 'red' }}>
            {this.state.passwordError}
          </div>
          <Form.Group>
            <Form.Control
              type="submit"
              value="Register"
              className="btn btn-primary"
            />
          </Form.Group>
        </Form>
      </Container>
    )
  }
}

import React，{Component}来自'React'；
从“axios”导入axios；
从“react bootstrap”导入{Form，Container}
导出默认类RegisterUser扩展组件{
建造师（道具）{
超级（道具）；
this.onChangeFirstName=this.onChangeFirstName.bind（this）；
this.onChangeLastName=this.onChangeLastName.bind（this）；
this.onchangemail=this.onchangemail.bind（this）；
this.onChangePassword=this.onChangePassword.bind（this）；
this.onSubmit=this.onSubmit.bind（this）；
此.state={
名字：''，
姓氏：“”，
电子邮件：“”，
密码：“”，
firstNameError:“”，
lastNameError:“”，
电子邮件错误：“”，
密码错误：“”，
}
}
onChangeFirstName（e）{
这是我的国家({
名字：e.target.value
})
}
onChangeLastName（e）{
这是我的国家({
姓氏：e.target.value
})
}
OnChange电子邮件（e）{
这是我的国家({
电子邮件：e.target.value
})
}
onChangePassword（e）{
这是我的国家({
密码：e.target.value
})
}
验证（）{
//让firstNameError=''；
//让lastNameError=''；
//让emailError=''；
让passwordError=''；
如果（！this.state.password.length<6）{
passwordError='密码必须至少包含6个字符'
}
if（密码错误）{
this.setState（{passwordError}）
返回错误
}
返回true；
}
提交（e）{
e、 预防默认值（）；
const isValid=this.validate（）
如果（有效）{
常量用户={
名字：this.state.firstName，
lastName:this.state.lastName，
电子邮件：this.state.email，
密码：this.state.password，
}
console.log（用户）；
轴心柱http://localhost:5001/users/add，用户）
。然后（res=>console.log（res.data））；
这是我的国家({
名字：''，
姓氏：“”，
电子邮件：“”，
密码：“”
})
}
}
render（）{
返回(
登记
名字
{this.state.firstNameError}
姓
{this.state.lastNameError}
电子邮件
{this.state.emailError}
密码
{this.state.passwordError}
)
}
}

验证中的代码未重置错误消息。如果密码有效，则应使用以下命令重置密码：

this.setState({ passwordError: '' })

---

我错误地假设，

if（passwordError）

将为空字符串返回true，但事实并非如此。如果您能够使用开发人员工具在浏览器中调试代码，您可能会看到为什么没有发布正确的内容。这可能是使用常量作为有效标志的结果。

发现了该问题。一部分在后端，但另一部分在原始帖子的代码中，我在密码验证错误中有一个感叹号，不应该出现在那里

if (!this.state.password.length < 6) {
  passwordError = 'Password must be at least 6 characters'
}

if（！this.state.password.length<6）{
passwordError='密码必须至少包含6个字符'
}

当我将其更改为：

if (this.state.password.length < 6) {
  passwordError = 'Password must be at least 6 characters'
}

if（this.state.password.length<6）{
passwordError='密码必须至少包含6个字符'
}