感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

【プログラミング 22時間目】フォームの送信の際にチェックを行う。

スポンサーリンク

やさしいWebアプリプログラミングの勉強。

フォームの送信前に戻り値によって判断するための属性→onsubmit
フォームの値を取得する→フォーム名.テキスト名.value

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="Sample.css">
<title>フォームのチェック</title>
<script type="text/javascript">
function depart() {
	//空欄のチェック
	var p = myform.place.value;
	var res;
	if(p == ""){
		window.alert("何か入力してください");
		res = false;
		return res;
	} else {
		window.alert("入力OKです\n次に送信の確認をします。");
	}
	//送信の確認
	res = window.confirm("送信しますか?");
	return res;
}
</script>
</head>
<body>
<h1>出発地のご希望</h1>
<form name="myform" action="8_3.html"
				onsubmit="return depart()">
<input type="text" name="place"/>
<input type="submit" value="送信"/>
</form>
</body>
</html>


正規表現(regular expression)
RegExpオブジェクトを作成する際のオプション
i・・・大文字・小文字を区別しない
g・・・文字列全体に対して検索
m・・・複数行を検索

<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="Sample.css">
<title>正規表現のサンプル</title>
<script type="text/javascript">
function check(){
	
	//大文字小文字を区別しない正規表現の作成
	var p = new RegExp("Hello", "i");
	var s = myform.hello.value;
	
	//入力された文字列が「hello」と一致するかチェックする
	var res = s.match(p);
	
	if(res == null) {
		window.alert("入力はHelloをお願いします");
		res = false;
	} else {
		window.alert("送信しました");
		res = true;
	}
	return res;
}
</script>
</head>
<body>
<h1>挨拶の入力</h1>
<form name="myform" action="8_4.html"
		onsubmit="return check()">
<input type="text" name="hello"/>
<input type="submit" value="送信"/>
</form>
</body>
</html>


正規表現にはメタ文字(meta character)と呼ばれる特殊な文字を使うことができる。

^→行頭
$→行末

<!DOCTYPE html>
<html lang="ja">
<head>
<title>正規表現2</title>
</head>
<body>
<script type="text/javascript">
	var ptr = ["WEB","^WEB","WEB$","^WEB$"];
	var str = ["WEB","WEBB","WEBBB","WWEB"];
</script>
<table border="1">
<tr><th>パターン</th><th>文字列</th><th>マッチ</th>
</tr>

<script type="text/javascript">

for(var i=0; i<ptr.length; i++) {
	for(var j=0; j<str.length;j++){
		document.writeln("<tr><td>" + ptr[i] + "</td><td>" + str[j] + "</td>");
		var p = new RegExp(ptr[i],"i");
		var mt = (str[j].match(p) != null) ? "○": "×";
		document.writeln("<td>" + mt + "</td></tr>");
	}
}
</script>
</table>
</body>
</html>