年齢の入力チェックをJavaScriptで行ってみます。
まずは動きの確認を→サンプル
↑マウスホイールでクリックすると別窓で開きます。
こんな感じです。
メモも兼ねて以下に詳しく書いていきます。
いきなり蛇足
※紹介しておいてなんですが、しっかり年齢を入力させたいのであればセレクトボックスを用いる方がよろしいです。
また、JavaScriptでチェックしているからといってサーバー側でのチェックを怠ってはいけません。
JavaScript部分の説明
変数の定義
var AgeVal = document.form1.Age.value var AgeValCnt = document.form1.Age.value.length /*変数を定義します*/
1行目でform1のAgeのvalueを変数に代入しています。
2行目でそのvalueの文字数をカウントして変数に代入しています。
2行目は以下の様に記述する方が一般的です。
var AgeValCnt = AgeVal.length /*一行目で定義した変数を利用*/
正規表現による半角英数チェック
入力された値を正規表現を用いて精査してあげます。
AgeVal.match( /[^0-9]+/ ) )
正規表現を説明していると物凄い事になってしまいますのではじめての正規表現辺を参考にしてください。
それから文字数の判定を行います。
一般的には2桁が想定されるので以下のように記述します。
if( ( AgeVal.match( /[^0-9]+/ ) ) || AgeValCnt != 2){
/*正規表現による半角英数チェック+文字数が2文字の判定*/
alert("(｀Д´)ｺﾞｺﾞｺﾞ...━(ノдヽ)━( 乂 )━━━ヽ(ﾟДﾟ)ﾉｺﾞﾙｧｧｱ!!")
return(false);
}
ここまでが値が正しく無い場合の判定を行うScriptになります。
(X)HTML部分の説明
form部分にonSubmitでfunctionを呼ぶ記述を追加します。
<form name="form1" onSubmit="return check()"> <input type="text" name="Age" value="">歳 <br /> <input type="submit" value="submit"> </form>
ここで重要なのがfunction名の前にreturnの記述を追加することです。
これを記述しないとformの送信が実行されてしまいます。
全体のソースはサンプルでご確認ください。
18歳以下の方を弾きたいなら条件にvalueの値が18以上なのか、以下なのかを加えれば良いと思います。
このエントリーのトラックバックURL：
Posted by ; りぃず ： 2008年10月23日 01:24
>りぃず
コメントありがとうございます。
正規表現のお勉強なら制作会社で働く人向け「はじめての正規表現」 - あと味も合わせて参考になると思いますよ！
>AgeValCntは1でも良いのではないでしょーか。
一般的に想定される値に適宜変更してください。
もしくはこの判定抜きで最後に書いている様に値を精査するのでもいいかもしれません。
100歳の人来たらエラーになっちゃうｗ
Posted by ; caraldo_k ： 2008年10月23日 11:16
caraldo_K
Webディレクター的な事やってます！
iPhone楽しい！マラソン・ロードバイクで肉体改造計画中！でも一番好きなのは漫画です㌰㌰⋋( 'Θ')⋌㌰㌰
poooooon
最近Web屋になりました。iPhoneとねこが好きです。ロードバイクは好きと良く言いますが全然乗ってません。
- Web [56]
- スマートフォン [13]
- Android
- iPhone [13]
- デザインツール [12]
- Fireworks [3]
- Illustrator [1]
- Photoshop [6]
- パソコン [29]
- プログラミング [43]
- JavaScript [20]
- MovableType [22]
- PHP [8]
- 個人的ななにか [49]
おつかれさまですー。
ちょっと前に始めて正規表現に触れてカナリたのしかったんで、また勉強してみようかな～。
あ、「年齢のチェック」ならAgeValCntは1でも良いのではないでしょーか。