編集:私は当初、入力が非数値かどうかをテストするために isNaN() で parseInt を使用することを提案しました。正規表現を使用すると、"4a" のようなケースが正しくフォーマットされるだけでなく、実際には多くの場合で高速になるようです (驚き!)。
説明のために、ボタン付きの HTML をモックアップしました。
HTML:
<form>
<label for="userAge">Age:</label>
<input type="text" name="userAge" id="userAge" />
<input type="button" id="test" name="test" value="Test" />
</form>
JavaScript:
function validateForm() {
// get the input value once and use a variable
// this makes the rest of the code more readable
// and has a small performance benefit in retrieving
// the input value once
var userAge = document.forms[0].userAge.value;
// is it blank?
if (userAge === "") {
alert("Age field cannot be empty.")
return false;
}
// is it a valid number? testing for positive integers
if (!userAge.match(/^\d+$/)) {
alert("Your age input is not correct.")
return false;
}
// you could also test parseInt(userAge, 10) < 5
if (userAge < 5) {
alert("Your age input is not correct.")
return false;
}
alert("Name and Age are valid.");
return true;
}
// trigger validateForm() however you want, I did this as an example
document.getElementById("test").onclick = validateForm;
デモ用の jsFiddle は次のとおりです: http://jsfiddle.net/willslab/m2spX/6/
正規表現について: userAge.match(/^\d+$/) は、userAge に正の整数しか含まれていない場合に true を返します。先頭の / と末尾の / は、正規表現リテラルを示します。\d は ASCII 数字のみを示します。+ は、前のパターン (この場合は数字) の 1 つ以上の出現に一致します。^ は最初から一致、$ は最後まで一致を示します。したがって、 /^\d+$/ は最初から最後まで ASCII 数字のみに一致する正規表現リテラルです!
また、OR 演算子 (||) を使用して最後の 2 つの if ステートメントを結合できることにも注意してください。それぞれに固有の検証メッセージを与えたい場合に備えて、これらを分離したままにしました。
次のようになります。
if (!userAge.match(/^\d+$/) || userAge < 5) {
alert("Your age input is not correct.")
return false;
}
コードについてご不明な点がございましたら、お気軽にお問い合わせください。説明させていただきます。それが役立つことを願っています!