如何利用Reactjs进行简单的表单验证

原文链接
翻译者：jiong
这个简单的教程，会一步步教你如何在React中进行基本的表单验证。

你可以在github上看到所有代码

我们使用create-react-app来快速创建并运行简单的react应用程序。

从npm安装软件包并创建一个新的应用程序：

$ npm install -g create-react-app
$ create-react-app react-form-validation-demo

现在运行程序：

$ cd react-form-validation-demo/
$ npm start

程序运行的时候会在http://localhost:3000/打开。

接下来，让我们添加bootstrap，以便我们可以轻松地为表单设置样式：

$ npm install react-bootstrap — save
$ npm install bootstrap@3 — save

在src/index.js文件的开头导入Bootstrap CSS和可选的Bootstrap theme CSS：

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

好的，现在来构建我们的核心演示程序。添加一个Form组件。

在src/App.js中，我们用我们要构建的Form组件来替换默认的简介文本标记。 我们还需要导入它：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Form from './Form.js';
class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>React Form Validation Demo</h2>
        </div>
        <Form />
      </div>
    );
  }
}
export default App;

我从Bootstrap文档中复制了一个示例表单。

但是需要注意进行一些配置，以便让他与JSX一起工作。

class和for是JavaScript中的保留关键字，因此我们必须使用className和htmlFor进行替代。

我们还需要确保我们关闭所有标签，包括输入标签。

现在，我们在构造函数中初始化状态：

constructor (props) {
  super(props);
  this.state = {
    email: '',
    password: ''
  }
}

我们正在设置mail和password为空字符串。

我们把mail的状态值输入表单：

value={this.state.email}

password

value={this.state.password}

但是我们没有更新用户输入的状态，所以如果我们现在键入表单字段，文本也不会出现。

我们需要一个用于输入字段的onChange处理函数：

onChange={this.handleUserInput}

按照如下定义：

handleUserInput = (e) {
  const name = e.target.name;
  const value = e.target.value;
  this.setState({[name]: value});
}

现在我们可以进行验证了。

我们将保存任何验证错误和表单的有效性状态。

所以让我们添加几个属性到初始状态：

constructor (props) {
  super(props);
  this.state = {
    email: '',
    password: '',
    formErrors: {email: '', password: ''},
    emailValid: false,
    passwordValid: false,
    formValid: false
  }
}

我们添加一个名为formErrors的对象属性，其中输入字段名称作为键，任何验证错误作为其值。每个键的初始值是一个空字符串。

还有3个布尔属性emailValid，passwordValid和formValid，将根据我们的验证结果来启用或禁用表单提交按钮。它们的初始值设置为false。现在让我们添加一个名为FormErrors的新组件，以便从表单上方的验证中显示错误。

<div className=”panel panel-default”>
 <FormErrors formErrors={this.state.formErrors} />
</div>

保存在src/FormErrors.js中：

import React from ‘react’;
export const FormErrors = ({formErrors}) =>
  <div className='formErrors'>
    {Object.keys(formErrors).map((fieldName, i) => {
      if(formErrors[fieldName].length > 0){
        return (
          <p key={i}>{fieldName} {formErrors[fieldName]}</p>
        )
      } else {
        return '';
      }
    })}
  </div>

它是一个无状态的功能组件（或演示组件），简单地遍历所有的表单验证错误并显示它们。

现在，在用户键入字段后调用验证。

setState方法接受一个回调函数作为第二个参数，所以让我们传递一个验证函数给它。

handleUserInput (e) {
  const name = e.target.name;
  const value = e.target.value;
  this.setState({[name]: value},
                () => { this.validateField(name, value) });
}

定义如下：

validateField(fieldName, value) {
  let fieldValidationErrors = this.state.formErrors;
  let emailValid = this.state.emailValid;
  let passwordValid = this.state.passwordValid;
switch(fieldName) {
    case 'email':
      emailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
      fieldValidationErrors.email = emailValid ? '' : ' is invalid';
      break;
    case 'password':
      passwordValid = value.length >= 6;
      fieldValidationErrors.password = passwordValid ? '': ' is too short';
      break;
    default:
      break;
  }
  this.setState({formErrors: fieldValidationErrors,
                  emailValid: emailValid,
                  passwordValid: passwordValid
                }, this.validateForm);
}
validateForm() {
  this.setState({formValid: this.state.emailValid &&
                            this.state.passwordValid});
}

我们对输入字段做两个不同的检查。 对于mail字段，我们使用正则表达式查看它是否是一个mail。

注意：使用的是Devise库中的一个示例regex。使用正则表达式检查mail是非常复杂的，但是这个简单的正则表达式对我们的简易应用程序有效。

对于password字段，我们检查长度是否至少为6个字符。
当该字段未通过检查时，我们设置一个错误消息并将其有效性设置为false。

然后我们调用setState来更新formErrors和field的有效性，我们传递validateForm回调来设置formValid的值。

我们根据formValid state属性的值设置submit按钮的disabled属性。

<button type="submit" className="btn btn-primary"
  disabled={!this.state.formValid}>Sign up</button>

这样，我们的基本验证流程就结束了。

我们可以通过在输入字段出现错误时突出显示输入字段来增强显示效果。

根据其错误值将引导的has-error类添加到字段的表单组：

<div className={`form-group
                 ${this.errorClass(this.state.formErrors.email)}`}>

errorClass方法如下定义：

errorClass(error) {
   return(error.length === 0 ? '' : 'has-error');
}

现在当一个字段有错误时，它周围会有一个红色的边框。

这就是本教程的所有内容。

这是一个非常简单的例子。 我们的验证码中有硬编码的字段名称，这不是理想的或可扩展的。 我们的每个字段只有一个验证，这也是不实际的。

但是我们可以将其概括为处理多个具有多个错误的字段。

有许多库可用于表单验证，但在你开始使用它们之前，考虑好如何实现功能。