在 React 中验证表单输入字段

Question

<div className="form-group">
  <label className="col-sm-0 control-label"> Name : &nbsp; </label>
  <input
    type="text"
    value={this.state.UserName}
    onChange={this.handleChangeUserName}
    placeholder="Name"
    pattern="[A-Za-z]{3}"
    className="form-control"
  />
</div>

您好，我正在尝试使用模式验证来验证 React 中的表单输入字段。但它不起作用。我正在使用像pattern="[A-Za-z]{3}" 这样简单的验证。

请告诉我如何解决这个问题。将验证放入 React Bootstrap 组件中。

Answer 1

您正在使用 input 元素的 value 属性（表示受控组件）并在 onChange 方法中更新状态，因此您可以轻松地在 onChange 中测试此正则表达式并仅在输入为有效的。

像这样：

handleChangeUserName(e){
   if(e.target.value.match("^[a-zA-Z ]*$") != null){
       this.setState({UserName: e.target.value});
   }
} 

检查工作代码：

class HelloWidget extends React.Component {
  
  constructor(){
    super();
    this.state={UserName:''}
    this.handleChangeUserName = this.handleChangeUserName.bind(this);
  }
  
  handleChangeUserName(e){
    if(e.target.value.match("^[a-zA-Z ]*$")!=null) {
      this.setState({UserName: e.target.value});
    }
  }

  render(){
    return(
      <div className="form-group">
        <label className="col-sm-0 control-label" htmlFor="textinput"> Name : &nbsp; </label>
        <input type="text" value={this.state.UserName} onChange={this.handleChangeUserName}  placeholder="Name" className="form-control"></input>
      </div>
    )
  }
}
  
ReactDOM.render(<HelloWidget/>, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='container' />

检查jsfiddle 的工作示例：https://jsfiddle.net/uL4fj4qL/11/

检查此jsfiddle，添加Material-Ui snackbar 以显示错误，如果用户尝试输入错误值：https://jsfiddle.net/4zqwq1fj/

Answer 2

pattern="[A-Za-z]{3}" 是 HTML5 的一个特征。

完整解决方案在这里：https://codepen.io/tkrotoff/pen/qypXWZ?editors=0010

如果你只想使用默认的 HTML5 验证：

class FormValidate extends React.Component {
  state = {
    username: ''
  };

  handleUsernameChange = e => {
    console.log('handleUsernameChange()');
    this.setState({
      username: e.target.value
    });
  }

  handleSubmit = e => {
    console.log('handleSubmit() Submit form with state:', this.state);
    e.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div className="form-group">
          <label htmlFor="username">Name</label>
          <input
            id="username"
            name="username"
            value={this.state.username}
            onChange={this.handleUsernameChange}
            placeholder="Name"
            pattern="[A-Za-z]{3}"
            className="form-control" />
        </div>

        <button className="btn btn-primary">Submit</button>
      </form>
    );
  }
}

如果你想更好地与Bootstrap 4集成：

class FormNoValidate extends React.Component {
  state = {
    username: '',
    error: ''
  };

  handleUsernameChange = e => {
    console.log('handleUsernameChange()');
    const target = e.target;
    this.setState({
      username: target.value,
      error: target.validationMessage
    });
  }

  handleSubmit = e => {
    console.log('handleSubmit() Submit form with state:', this.state);
    e.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit} noValidate>
        <div className="form-group">
          <label htmlFor="username">Name</label>
          <input
            id="username"
            name="username"
            value={this.state.username}
            onChange={this.handleUsernameChange}
            placeholder="Name"
            pattern="[A-Za-z]{3}"
            className="form-control" />
          <div className="invalid-feedback d-block">
            {this.state.error}
          </div>
        </div>

        <button className="btn btn-primary">Submit</button>
      </form>
    );
  }
}

如果您想走得更远（更多功能、更多控制、更好的集成）：

我编写了一个非常简单的 React 库来处理表单验证并支持 HTML5 属性：https://github.com/tkrotoff/react-form-with-constraints

此处的示例：https://github.com/tkrotoff/react-form-with-constraints/blob/master/README.md#examples

Answer 3

使用 React 钩子，我们可以构建自定义钩子来简化验证。以你的例子打击。您可以通过从反应钩子形式添加register 方法轻松地：https://github.com/bluebill1049/react-hook-form

import React from 'react';
import useForm from 'react-hook-form';

function Test() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);

  return {
    <form className="form-group" onSubmit={handleSubmit(onSubmit)}>
      <label className="col-sm-0 control-label"> Name : &nbsp; </label>
        <input
          type="text"
          ref={register}
          placeholder="Name"
          pattern="[A-Za-z]{3}"
          className="form-control"
        /> 
     </div>
  }
}