チェックフォーム
チェックフォーム
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8" />
<title>チェックフォーム</title>
<script src="../js/prototype.js" type="text/Javascript"></script>
<script src="../js/test3.js" type="text/Javascript"></script>
</head>
<body>
<form id=frm>
<div>
値：<input type=text id=intData>
<span id=errorNum class="エラー"></span>
</div>
<div>
名称：<input type=text id=strData>
<span id=errorText class="エラー"></span>
</div>
<input type=button id=btnCheck value="送信" />
<div id=errorMessage></div>
</form>
</body>
</html>
<!--
------------------------------------------------------------------------
test3.js
//桁数
//このサンプルでは数字を5桁としています
var CON_DIGIT_NUM = 5;
//構造体のような形式でエラー情報を設定、取得します
var typeErrorInfo =
{
intData : false,
strData : false
};
//画面が呼ばれるタイミングで無名関数により初期化をします
Event.observe(window, 'load', function()
{
//初期処理
init();
//数字の入力
Event.observe('intData' , 'keyup', checkDataNum );
//文字の入力
Event.observe('strData', 'keyup', checkDataText);
//ボタンの制御
Event.observe('btnCheck' , 'click', checkData );
}
);
//初期処理
function init(){
//フォームの最初のエレメントにフォーカスを設定します
Form.focusFirstElement("frm");
$('btnCheck').disabled = true;
}
//数字の入力
function checkDataNum(){
//数字チェック（数字および桁）
if( checkNumAndDigit
(
{
Data : $('intData').value,
Digit : CON_DIGIT_NUM,
errorData : 'errorNum'
}
)
)
{
$('errorNum').innerHTML = '';
typeErrorInfo.intData = true;
}
else
{
typeErrorInfo.intData = false;
}
//エラーチェック
errorCheck();
}
//文字の入力
function checkDataText() {
if( existsData
(
{
Data : $('strData').value,
Error : '名称を入力してください。',
errorData : 'errorText'
}
)
)
{
typeErrorInfo.strData = true;
}
else
{
typeErrorInfo.strData = false;
}
//エラーチェック
errorCheck();
}
function checkData(){
$('errorMessage').innerHTML =
'入力した数字：' + $('intData').value + '<br />' +
'入力した文字列：' + $('strData').value
}
//数字チェック（数字および桁）
function checkNumAndDigit( tmp ){
//数字を使用しているか（正規表現）
if( tmp.Data.match( /^[0-9]+$/ ) )
{
//桁数が指定の桁となっているか？
if(tmp.Data.length == tmp.Digit)
{
$(tmp.errorData).innerHTML = '';
return true;
}
else
{
$(tmp.errorData).innerHTML = '値の桁は' + tmp.Digit +
'桁です。';
return false ;
}
}
else
{
$(tmp.errorData).innerHTML = '値は数字を使用してください。';
return false ;
}
}
//文字存在チェック
//このサンプルでは1文字以上あることを条件としています
function existsData(tmp){
//長さが1文字以上あること
if( tmp.Data.length > 0){
$(tmp.errorData).innerHTML = '';
return true;
}
else
{
$(tmp.errorData).innerHTML = tmp.Error;
return false;
}
}
//エラーチェック
function errorCheck(){
//数字の状態と文字の状態に問題がないか？
if( typeErrorInfo.intData == true && typeErrorInfo.strData == true )
{
//使用可能とする
$( 'btnCheck' ).disabled = false;
}
else
{
//使用不可とする
$( 'btnCheck' ).disabled = true;
}
}
------------------------------------------------------------------------
-->
|
|