Railsで架空のCafeのHPを作ってみよう!【15日目】『1以上の半角数字の正規表現』編

概要

基本Railsの記法に則り書いていきます！
１から全ての説明ではなく
その中であれ？どうやるの？と
疑問に思った点や実装に困った箇所を
ピックアップして紹介していきます♩

設定と準備

・Rails
・HTML
・CSS
・Javascript(jQuery)

↑上記の言語とフレームワークを使い
架空(自分で考えたテキトーなもの)のCafeの
HPを作っていこうと思います！

15日目の作業内容

・JQueryを使いエラーメッセージを非同期で表示

15日目の気になった箇所

値段の入力で1以上の半角数字で入力させるエラーメッセージを記述したい。

仮説

正規表現を使い半角数字かつ1以上のマッチした時以外でエラーメッセージを
出せば表現できるはず。

今回は正規表現の箇所だけ抜粋して仮説と結論を記述するので
エラーメッセージの表示のさせ方などは割愛させていただきます。

error_messages.js

 if (price.match(/^[0]+[^0-9]/)){
    $('#price-error').html('1以上かつ半角数字で入力してください');
  } 
  return result;
}

このように
^　← 先頭の1文字のマッチする　
[0]　　← 数字の0
[^0-9] ← 半角数字以外
先頭が0かつ半角数字以外にマッチするような正規表現で試したが
うまくいかなかった。
先頭が0だとダメなのでこの記述だと先頭は文字列を含んでしまい "a" などを
入力しても通ってしまう。

逆にして

error_messages.js

 if (price.match(/[^0-9]+^[0]/)){
    $('#price-error').html('1以上かつ半角数字で入力してください');
  } 
  return result;
}

このように半角数字かつ先頭が0だとダメという正規表現を試してみたが
先頭を意味する ^ ←こちらは最初に記述する必要があるため機能しなかった。

結論

分けて段階を踏み、マッチさせていく必要があった。

error_messages.js

 if (price.match(/[^0-9]/)){
    $('#price-error').html('半角数字で入力してください');
  } else if (price.match(/^[0]/)){
    $('#price-error').html('1以上でお願い致します');
}
  return result;
}

このように段階を踏みまずは、
/[^0-9]/　← 半角英数字のみ

その次に、
/^[0]/ ← 先頭が0だとダメ

という風に、大きな枠から順に狭めていくように
記述するとうまく記述することができる！