Bootstrap模式驗證反應JS

<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}」一樣簡單「Bootstrap模式驗證反應JS

請讓我知道如何解決這個問題。在ReactJS引導組件中加入驗證。

來源

2017-01-30 developer_beginning

üř使用input元素的值屬性，並以onChange方法設定的狀態下，所以U可以容易地在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/

來源

2017-01-30 13:10:28

它是爲你工作嗎？ –

不，它不驗證我輸入的文本 –

你想要什麼驗證？我使用的正則表達式驗證它是否是一個字符，它不會允許用戶寫任何數字。你是否檢查過'jsfiddle'這個問題呢？ –

Bootstrap模式驗證反應JS

回答

相關問題