入力文字列の検査が目的なので、window オフジェクトの下にプロパティを作成して、その中に複数のメソッドを定義しています。引数は、JavaScript で、入力フィールドの検査をする事を想定しているので、文字列を取り出す処理は、メソッド内に委ねる為に id 渡しとしています。
簡単な正規表現の利用
ここで使われている正規表現は、基礎なものしか使用していません。しかし、これを理解すればもう少し複雑な正規表現を読み解く事が容易になります。
1) ^ … $
これは、最初と最後を示します。限定された入力という範囲を明確にしています。
2) .
任意の文字です。( 一つの文字です )
3) +
直前の文字が一つ以上続く文字列を意味します
4) \
エスケープ文字です。正規表現で使われる特殊な文字を、通常の文字として使いたい場合に前に付けます
5) []
その中で指定された文字種( グループ )を、一つの文字として考えます。
[0-9]+ とすれば、数字文字が、一つ以上連続している文字列になります。
5) {}
直前の文字が何文字なのかを指定するもので、{1,2} として２通り指定する事も可能です
日付チェック
正規表現では、フォーマットのチェックしかできないので、日付が日付として正しいかどうかをさらにチェックしています。
<script type="text/javascript">
window["_c"] = {
"isMail": function(id) {
var str = document.getElementById(id).value;
return ( str.match(/^.+@.+\..+$/) != null );
},
"isSuji": function(id) {
var str = document.getElementById(id).value;
return ( str.match(/^[0-9]+$/) != null );
},
"isEiji": function(id) {
var str = document.getElementById(id).value;
return ( str.match(/^[a-zA-Z]+$/) != null );
},
"isEisuji": function(id) {
var str = document.getElementById(id).value;
return ( str.match(/^[a-zA-Z0-9]+$/) != null );
},
"isDate": function(id) {
var str = document.getElementById(id).value;
if ( str.match(/^[0-9]{4}\/[0-9]{1,2}\/[0-9]{1,2}$/) != null ) {
var parts = str.split( "/" );
var nYear = Number(parts[0]);
var nMonth = Number(parts[1]) - 1;
var nDay = Number(parts[2]);
// 月,日の妥当性チェック
if ( 0 <= nMonth && nMonth <= 11 && 1 <= nDay && nDay <= 31 ) {
var dt = new Date(nYear, nMonth, nDay);
if( isNaN(dt) ) {
return false;
}
else if(
dt.getFullYear() == nYear &&
dt.getMonth() == nMonth &&
dt.getDate() == nDay ) {
return true;
}
else{
return false;
}
}
else{
return false;
}
}
}
}
</script>
<input type="text"
id="check_target" >
<br>
<input type="button"
value="isMail"
onclick='
if ( !_c.isMail("check_target") ) {
alert("メールアドレスではありません");
}
'>
<input type="button"
value="isSuji"
onclick='
if ( !_c.isSuji("check_target") ) {
alert("半角の数字ではありません");
}
'>
<input type="button"
value="isEiji"
onclick='
if ( !_c.isEiji("check_target") ) {
alert("半角の英字ではありません");
}
'>
<input type="button"
value="isEisuji"
onclick='
if ( !_c.isEisuji("check_target") ) {
alert("半角の英数字ではありません");
}
'>
<input type="button"
value="日付のフォーマットと論理チェック"
onclick='
if ( !_c.isDate("check_target") ) {
alert("日付として要求する内容に合っていません");
}
'>
IE11
Firefox インスペクタ
