JavaScriptによるウェブ制作(フォーム編_001)に引き続き、
JavaScriptでフォームのコントロールをしてみましょう。
前回おこなった文字アドレスを利用して、今回はフォームに入力してもらう文字に機種依存文字が無いかをチェックするものを作ってみたいと思います。
↓を参考にしてみてください。
入力フォームのHTML記載例
<!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=shift_jis" />
<title>入力テスト</title>
<script language="javascript" type="text/javascript" src="ngword.js"></script>
<script language="javascript" type="text/javascript">
<!--
function presubmit(){
var iCount;
var fCount;
var iCode;
var cnt;
read_ng_chars(); //不正文字列DB読込
var erflg;
for (fCount=0 ; fCount<document.forms[0].elements.length ; fCount++){
st_val = document.forms[0].elements[fCount].value;
for (iCount=0 ; iCount<st_val.length ; iCount++){
iCode = st_val.charCodeAt(iCount);
for( cnt = 0 ; cnt < ng_chars.length ; cnt++ ){
if ((iCode == ng_chars[cnt])){
alert('不正な文字が含まれています。');
document.forms[0].elements[fCount].value = '';
erflg=1;
}
}
}
}
if(erflg != 1){document.form1.submit();}else{return false;}
}
//-->
</script>
</head>
<body>
<div title="説明" align="left" style="margin:0 0 0 20px;">
<p>入力値１、入力値２に入力された値を読み取り、前回のお勉強で使ったように入力値を文字アドレスに変換します。<br />
その後、NGワードの書かれた外部JavaScriptファイルを読み込んで、問題があるか無いかをチェックしています。<br />
チェックして問題がある場合には、「問題があるよ！」とメッセージを出した上で入力値を消してしまうようにセットしてあります。<br />
なお、現状①～⑩が問題あるものとしてNGワード集に登録されています。<br />
<br />
入力枠を増やせば自動的にチェック対象が増えるようになっています。<br />
</p>
</div>
<form name="form1" method="post" action="/path/to/cgi" onsubmit="return false;">
入力値１<input type="text" name="intext01" value="" /><br />
入力値２<input type="text" name="intext02" value="" /><br />
<input type="button" name="Submit" value="チェック" onclick="javascript:presubmit();" />
</form>
<div style="float:left; margin:9px 0 0 0 ;">
<address><a href="http://www.xn--gckc5l536jj8c.net/" target="_blank" title="ウェブ制作.net">©ウェブ制作.net</a></address>
</div>
<div style="float:right;">
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</div>
</body>
</html>
ngword.js の記載例
function read_ng_chars(){
ng_chars = new Array(
9312, //①
9313, //②
9314, //③
9315, //④
9316, //⑤
9317, //⑥
9318, //⑦
9319, //⑧
9320, //⑨
9321 //⑩
);
}
