概要
基本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だとダメ
という風に、大きな枠から順に狭めていくように
記述するとうまく記述することができる！
↧