在 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 组件中。

原文由 developer_beginning 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

原文由 Mayank Shukla 发布，翻译遵循 CC BY-SA 3.0 许可协议