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

react.js

2018.03.312023.04.06

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

サンプル