複数の入力項目があって、
入力項目が、数字項目だったら、入力後、数字チェックをして
エラーなら、入力項目の近くにエラーメッセージを出す
入力項目が、アカウントだったら、入力後、アカウント文字種チェックをして
エラーなら、入力項目の近くにエラーメッセージを出す
入力項目が、文字列だったら、入力後、文字チェックをして
エラーなら、入力項目の近くにエラーメッセージを出す
：
：
というようなJavascriptのチェック方法について
以下のようにするとできる。
■概要
・クラス名に、
数字ならnum,
アカウントならacc,
文字列ならstr
のように、チェックしたい内容に応じて、クラス名をつける
・エラーメッセージを出力するところのIDを、項目名＋"err"
のように、固定に決める
・javascriptで、
$(".クラス名").blur(function(){
エラーチェック
エラーなら、this.name+"err"にエラーセット
});
のような、エラーチェックを書く。
なお、blurは、フォーカスを失ったときに実行するイベント
■ソースコード
こんなかんじ。クラスnumは数字チェック、
accは、アカウント名チェックで、アカウントに; , " ' \があると、
エラーになる。
<HTML>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
type="text/javascript"></script>
<script>
$(function(){
//------------------------------//
// 数字クラスチェック //
//------------------------------//
$(".num").blur(function(){
myname = this.name;
chkval =document.f1[myname].value;
if (chkval.length == 0 )
{
$("#"+myname+"err").text("入力されてない");
return;
}
for(i=0; i < chkval.length ; i ++)
{
c = chkval.charAt(i);
if ( ( c < '0' ) || (c > '9') )
{
$("#"+myname+"err").text("入力値が数字じゃない");
return;
}
}
$("#"+myname+"err").text("");
});
//------------------------------//
// アカウントクラスチェック //
//------------------------------//
$(".acc").blur(function(){
myname = this.name;
chkval =document.f1[myname].value;
if (chkval.length == 0 )
{
$("#"+myname+"err").text("入力されてない");
return;
}
for(i=0; i < chkval.length ; i ++)
{
c = chkval.charAt(i);
switch(c)
{
case ';':
case ',':
case '"':
case '\'':
case '\\':
$("#"+myname+"err").text("許されない文字がある");
return;
}
}
$("#"+myname+"err").text("");
});
});
</script>
<body>
<form name=f1>
<INPUT type="text" name="text1" class="num"><SPAN id="text1err"></SPAN><BR/>
<INPUT type="text" name="text2" class="num"><SPAN id="text2err"></SPAN><BR/>
<INPUT type="text" name="text3" class="acc"><SPAN id="text3err"></SPAN><BR/>
</form>
</body>
</html>
|
アクセス
トータル
ランキング
