🐈

金額のバリデーションと表示について

1 min read

結論

・カンマを取り除いた状態で計算・保存する。表示する際には3桁区切りにして表示させる。
・カンマの位置がおかしい状態にならないように、focusが外れた際に3桁区切りに整形する。

クライアント側のバリデーション

三桁ずつカンマで区切られている金額をバリデーションするのは面倒なのでカンマを全て取り除いた上で
「半角数字で入力されていること」を正規表現で確認する。

sample.js
const priceInput = document.getElementById('price');
const trimmedPrice = priceInput.value.replace(/,/g, ''); 
if (String(trimmedPrice).match(/^\d+$/)) {
  alert('OKですニャ!');
} else {
  alert('NGですニャ!');
}

サーバー側のバリデーション

カンマで区切られていない状態で渡ってくることを想定しているが、サーバー側でも半角数字かを確認する。

sample.php
$price = str_replace(',','',$_POST['price']);
if (preg_match('/^[\d]+$/', $price)) {
  // OKですにゃ!!
}

金額入力時のフォームの挙動について

inputのfocusが外れた時に金額のフォーマットを整形する(三桁区切りにする)と良いかも

参考記事

https://qiita.com/daifuku_mochi2/items/087258cd3fc24eec42f0
https://www.flatflag.nir87.com/number_format-925

ベタープラクティス・間違っている箇所があれば教えてください🙇‍♂️

Discussion

ログインするとコメントできます