验证 React 中的表单输入字段 [英] Validation of form input fields in React

问题描述

<label className="col-sm-0 control-label">名称 : &nbsp;<输入类型=文本"值={this.state.UserName}onChange={this.handleChangeUserName}占位符=名称"模式="[A-Za-z]{3}"className="表单控件"/>

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

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

解决方案

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

像这样:

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

检查工作代码:

class HelloWidget 扩展 React.Component {构造函数(){极好的();this.state={用户名:''}this.handleChangeUserName = this.handleChangeUserName.bind(this);}handleChangeUserName(e){if(e.target.value.match("^[a-zA-Z ]*$")!=null) {this.setState({用户名: e.target.value});}}使成为(){返回(<div className="form-group"><label className="col-sm-0 control-label" htmlFor="textinput">名称 : &nbsp;<input type="text" value={this.state.UserName} onChange={this.handleChangeUserName} placeholder="Name" className="form-control"></input>

)}}ReactDOM.render(, 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小吃店以显示错误，如果用户尝试输入错误的值:https://jsfiddle.net/4zqwq1fj/

<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>

Hi, I am trying to validate a form input field in React using pattern validation. But it's not working. I am using validation as simple as pattern="[A-Za-z]{3}".

Kindly let me know how to work this out. Putting validation in React Bootstrap component.

解决方案

You are using the value property (means controlled component) of input element and updating the state in onChange method, So you can easily test this regex in onChange and update the state only when the input will be valid.

Like this:

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

Check the working code:

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' />

Check the jsfiddle for working example: https://jsfiddle.net/uL4fj4qL/11/

Check this jsfiddle, Material-Ui snackbar added to show the error, if user tries to enter the wrong value: https://jsfiddle.net/4zqwq1fj/

这篇关于验证 React 中的表单输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！