JavaScriptで年齢の入力チェックを行う
caraldo.net | WebとiPhoneとロードバイクが大好き！ » プログラミング » JavaScript » JavaScriptで年齢の入力チェックを行う
年齢の入力チェックを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以上なのか、以下なのかを加えれば良いと思います。