React 表单验证

Irakli Tchigladze 2022年5月18日

React React Form

在我们这个时代，公司为了许多不同的目的存储、维护和分析数据。

无论是维护用户数据库、生成报告，还是其他任何事情，数据的作用都不为过。因此，数据需要结构化和组织良好。

由 React 驱动的 Web 应用程序必须使用表单验证来确保用户输入遵循标准约定。这样，你可以促进用户旅程并以有组织的方式收集数据。

糟糕的数据验证也可能导致恶意攻击，因此实施适当的解决方案还可以提高应用程序的安全性。

React 表单验证

对于正确的 React 应用程序，表单验证是必不可少的功能。例如，电子邮件必须包含 @ 符号、有效后缀并满足其他条件。

`onChange` 事件

在 React 中实现表单验证的最有效方法是侦听 onChange 事件并在组件的 state 中维护用户输入。首先，你必须拥有受控输入，因此如果你有两个字段要验证（比如姓名和电子邮件），你需要使用以下空值初始化状态：

constructor(props){
    super(props)
    this.state = {
    inputFields: {"name": "", "email": ""},
    errorMessages: {}
  }
}

编写类组件时，必须在 constructor() 函数中初始化状态。拥有 errorMessages 属性也很好，你可以在其中存储消息以告诉用户输入的值有什么问题。

表单验证的第一步应该是使用 onChange 事件侦听器设置 <input> 元素。输入字段中的更改也将自动反映在状态中。

我们的 render() 方法应该是这样的：

render() {
    return (
    <form>
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": e.target.value, "email": this.state.inputFields.email}})} />
    <br />
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": this.state.inputFields.name,"email": e.target.value, }})}/>
    </form>
    )
  }

这是一个很好的开始;尽管如此，我们还需要为表单验证设置条件并生成错误消息。为此，我们创建了一个自定义的 validate() 函数。

为简单起见，我们将设置两个基本规则：名称应长于 2 个字母，电子邮件值应包含 @。现在，我们的整个应用程序应该是这样的：

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
    inputFields: {"name": "", "email": ""},
    errorMessages: {}
  }
}
  render() {
    console.log(this.state)
    const validate = () => {
      let inputFields = this.state.inputFields
      let errors = {}
      let validityStatus = true
      if (inputFields["name"].length <= 2){
        validityStatus = false
        errors["name"] = "The name should contain more than two symbols"
      }
      if (inputFields["email"].indexOf("@") === -1 ){
        validityStatus = false
        errors["email"] = "The email should contain @"
      }
      this.setState({errorMessages: errors})
      return validityStatus
    }
    const handleSubmit = (e) => {
      e.preventDefault();
      if (validate()){
        alert("form complete")
      }
      else {
        alert("errors")
      }
    }
    return (
    <form onSubmit={(e) => handleSubmit(e)}>
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": e.target.value, "email": this.state.inputFields.email}})} />
    <br />
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": this.state.inputFields.name,"email": e.target.value, }})}/>
    <br />
    <button type="submit">Submit</button>
    </form>
    )
  }
}

提交表单后，我们的 validate() 函数会检查输入到字段中的值，如果满足所有条件则返回 true，否则返回 false。一旦检查结束，handleSubmit() 函数会提醒 form complete 或 errors。

该函数还包括本地 errors 变量，用于存储每个文本字段的警告消息。检查完成后，它会引用该变量以更新 errorMessages 状态属性。

为方便起见，你可以在每个字段下添加一个文本，以显示该字段的错误消息。下面是一个例子：

return (
    <form onSubmit={(e) => handleSubmit(e)}>
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": e.target.value, "email": this.state.inputFields.email}})} />
    <p style={{color: "red"}}>{this.state.errorMessages.name}</p>
    <br />
    <input type="text" onChange={(e) => this.setState({inputFields: {"name": this.state.inputFields.name,"email": e.target.value, }})}/>
    <p style={{color: "red"}}>{this.state.errorMessages.email}</p>
    <br />
    <button type="submit">Submit</button>
    </form>
    )

这样，你可以使用 errorMessages 状态属性中的警告消息为用户提供有用的小警告，以帮助他们修复错误。

作者： Irakli Tchigladze

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

React 表单验证

onChange 事件

`onChange` 事件