ブートストラップパターンバリデーションReact 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のフォーム入力フィールドを検証しようとしています。私はパターン= "[A-Za-z] {3}"という簡単な検証を使用しています。ブートストラップパターンバリデーションReact JS

ReactJSブートストラップコンポーネントで検証を実行してください。

出典

2017-01-30 developer_beginning

Uはそうuが簡単にこのようなonChangeこの正規表現をテストすることができ、input要素の値プロパティを使用し、onChange方法状態を設定値R：

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

あなたは期待どおりに働いていますか？ –

いいえ、入力したテキストを検証していません –

どのような検証が必要ですか？正規表現私はその文字かどうかを検証するために、それはユーザーが任意のnumを書くことを許可しません。 uは 'jsfiddle'をチェックしましたが、その問題は何ですか？ –

ブートストラップパターンバリデーションReact JS

答えて

関連する問題