Reactのinput部品をバリデートする

Reactのinput部品をバリデートする

「Reactでinput部品を扱う」を投稿しましたが、今度は入力値をバリデートしてみます。

入力値はstateを使用して管理するので、this.setStateする前に入力値をチェックします。

以下は数値以外は入力できないようにした部品の例です。

class DynaForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {val:'入力'};
  }
  change(e) {
    let val = e.target.value;
    // 数値以外は削除
    let newVal = val.replace(/[^0-9]/g,'');
    this.setState({val:newVal})
  }
  render() {
    return (
      <input type="text" value={this.state.val} onChange={(e)=>{this.change(e)}} />
    )
  }
}
ReactDOM.render(
  <DynaForm />,
  document.getElementById("koko")
)

サンプル

フォーマットをバリデートする

例えば携帯番号のフォーマットはxxx-xxxx-xxxxというフォーマットの数値となります。

このフォーマットをバリデートしたい場合はJSの正規表現を使用してバリデートします。

バリデートする前に数値とハイフン以外は入力できないようにしておきます。

class DynaForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      val:'',
      isTrue:true
    };
  }
  change(e) {
    let val = e.target.value;
    // 数値とハイフン以外は削除
    let newVal = val.replace(/[^0-9\-]/g,'');
    const pattern = /^\d{3}-\d{4}-\d{4}$/;
    this.setState({val:newVal,isTrue:pattern.test(newVal)});
  }
  setMsg() {
    let msg;
    if (this.state.isTrue) {
      msg = <span>OK</span>;
    } else {
      msg = <span>NG</span>;
    }
    return msg;
  }
  render() {
    return (
      <div>
        <input type="text" value={this.state.val} onChange={(e)=>{this.change(e)}} />&nbsp;
        {this.setMsg()}
      </div>
    )
  }
}

サンプル

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^