Бутстреп-шаблон Проверка достоверности JS

Question

<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" pattern="[A-Za-z]{3}" className="form-control"></input> 
</div> 

Привет, Я пытаюсь проверить поле ввода формы в REACT JS с использованием проверки шаблона. но его не работает. Я использую валидацию так же просто, как pattern = "[A-Za-z] {3}"

Просьба дать мне знать, как это работает. Проверка валидации в компоненте загрузки ReactJS.

Answer 1

U г, используя значение свойства input элемента и установка состояния в onChange методе, так и может легко проверить это регулярное выражение в onChange как это:

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

Проверьте jsfiddle для рабочего примера: https://jsfiddle.net/uL4fj4qL/

Проверьте, есть ли здесь jsfiddle, Material-Ui snackbar, если пользователь пытается ввести неправильное значение: https://jsfiddle.net/4zqwq1fj/