WebDesigning 8月号掲載のサンプルです。掲載されているものとは若干内容（ここに掲載している最初のサンプルは誌面では未掲載（もともと説明用のため））が異なります。
【サンプルを実行する】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>入力フォームチェックサンプル</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="validate.js"></script>
<script type="text/javascript"><!--
Validator.register({
"#age" : {
"/^[0-9]+$/": "OK",
"/[^0-9]/": "1から9の数値を入れてください。"
}
});
// --></script>
</head>
<body>
<h1>リアルタイム入力チェック</h1>
<form>
値：<input name="age" id="age"><span id="age_msg"></span><br>
</form>
</body>
</html>
【サンプルを実行する】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>入力フォームチェックサンプル</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="validate.js"></script>
<script type="text/javascript"><!--
Validator.register({
"#acount" : {
"/^[(a-z|A-Z)]+$/": "OK",
"/[^(a-z|A-Z)]/":"アルファベット以外の文字を入れないでください",
"/^$/": "アカウントを入力してください",
},
"#passw" : {
"/^[(a-z|A-Z|0-9)]{8,16}$/": "OK",
"/^[(a-z|A-Z|0-9)]{16,}/": "長過ぎます",
"/^[(a-z|A-Z|0-9)]/": "短過ぎます",
}
});
// --></script>
</head>
<body>
<h1>リアルタイム入力チェック</h1>
<form>
アカウント：<input name="acount" id="acount"><span id="acount_msg"></span><br>
パスワード：<input name="passw" id="passw"><span id="passw_msg"></span><br>
</form>
*パスワードは8〜16文字
</body>
</html>
【サンプルを実行する】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>入力フォームチェックサンプル</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="validate.js"></script>
<script type="text/javascript"><!--
Validator.register({
"#zip" : {
"/^([0-9]{3}-[0-9]{4})$/": "OK",
"/[a-z|A-Z|]/":"英文字は使えません",
"/.{9,}/":"長過ぎます",
"/^$/":"xxx-xxxx形式で入力してください"
}
});
// --></script>
</head>
<body>
<h1>リアルタイム入力チェック</h1>
<form>
郵便番号：<input name="zip" id="zip"><span id="zip_msg"></span><br>
</form>
</body>
</html>
【サンプルを実行する】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>入力フォームチェックサンプル</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="validate.js"></script>
<script type="text/javascript"><!--
Validator.register({
"#date" : {
"/^([0-9]{4})\\/([0-9]{1,2})\\/([0-9]{1,2})$/": "OK",
"/^([0-9]{5,})\\/([0-9]{1,2})\\/([0-9]{1,2})$/": "年数が異常です",
"/^([0-9]{4})\\/([0-9]{3,})\\/([0-9]{1,2})$/": "月が異常です",
"/^([0-9]{4})\\/([0-9]{1,2})\\/([0-9]{3,})$/": "日が異常です",
"/[a-z|A-Z|]/":"英文字は使えません",
"/^$/":"yyyy/mm/dd形式で入力してください"
}
});
// --></script>
</head>
<body>
<h1>リアルタイム入力チェック</h1>
<form>
日付：<input name="date" id="date"><span id="date_msg"></span><br>
</form>
</body>
</html>
【サンプルを実行する】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>入力フォームチェックサンプル</title>
<style type="text/css"><!--
input {
width:200px;
border:1px gray solid;
font-size:11pt;
color:#334;
}
#date_msg {
color:red;
font-size:9pt;
}
// --></style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="validate.js"></script>
<script type="text/javascript"><!--
icon_ok = '<img src="ok.gif">';
icon_ng = '<img src="ng.gif">';
icon_caution = '<img src="caution.gif">';
Validator.register({
"#date" : {
"/^([0-9]{4})\\/([0-9]{1,2})\\/([0-9]{1,2})$/": icon_ok+"OK",
"/^([0-9]{5,})\\/([0-9]{1,2})\\/([0-9]{1,2})$/": icon_caution+"年数が異常です",
"/^([0-9]{4})\\/([0-9]{3,})\\/([0-9]{1,2})$/": "icon_caution+月が異常です",
"/^([0-9]{4})\\/([0-9]{1,2})\\/([0-9]{3,})$/": icon_caution+"日が異常です",
"/[a-z|A-Z|]/": icon_ng+"英文字は使えません",
"/^$/":"yyyy/mm/dd形式で入力してください"
}
});
// --></script>
</head>
<body>
<h1>リアルタイム入力チェック</h1>
<form>
日付：<input name="date" id="date"><span id="date_msg"></span><br>
</form>
</body>
</html>