7-4 簡?表單資?驗?

bںWAOMϥΪ̤ʪ̱`Τ覡CϥΪ̶JƥiणŦXnD]ҦpNmW񦨹qllBqll󤣥BҦrΫHΥdX~^AodziHbAݪ{Xi˴AñN~T^ǨϥΪ̡Coؤ覡W[FAtA][FƪǿqC@²檺ѨM״NObȤݥH JavaScript ӹ檺JiҪu@AHTOƾڦbeܦAeOTL~Aoˮ֪ƬO_TL{AN٬uҡv]Form Data Validation^A²١uҡv]Form Validation^C

ҥi JavaScript UئrPƭȪ禡ӹFAðtXƹƥAbAɾӴϥΪ̥ioͪ~CH JavaScript bȤݶiҪDnnBiKnpUGG

OAYȶȨϥΫȤݪ{XӶiҡAuưLߪ~A󦳤߭nqƯ}au@cNϥΪ̡AҬOLkw|CyܻA󭫭nơAFbΤݶiҥ~A̦n]bAiƪˬdC

~ANetscape IE bĥ|᳣䴩 JavaScript uqΪܪkv]Regular Expressions^AoO@M\D`jjrkAoϱoҪ{Xq²CqΪܪkA|bѫ򳹸`ԲӪСC`IhOH²䪺dҨӻҪA|ϥγqΪܪkAHKŪ̯iJpC

ڭ̨Ӭݤ@²檺dҡAdˬdϥΪ̿JqllAŪ̥iHۦJqllbӸոլݡG

Example]formValidation01.htm^G

bWzdҤAڭqll󪺳Wh²AC|pUG

dҪlɦpUG

lɡ]formValidation01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>²ҡGqll</h2>
<hr>

<script>
function validateForm(form){
	if (!checkEmail(form.email.value)){
		alert("Email Ʀ~ANeXI");
		return(false);	
	}
	alert("ƥTL~AߨeXI");
	form.submit();
	return(true);
}

function checkEmail(email){
	index = email.indexOf ('@', 0);		// M @ mA0 N}lM䪺_lm
	if (email.length==0) {
		alert("пJqlla}I");
		return (false);
	} else if (index==-1) {
		alert("~G]tu@vC");
		return (false);
	} else if (index==0) {
		alert("~Gu@veiŦrC");
		return (false);
	} else if (index==email.length-1) {
		alert("~Gu@vᤣiŦrC");
		return (false);
	} else
		return (true);
}
</script>

пJzӤHqllG<p>
<form>
qllG
<input type="text" name=email size=20 value="xxxx"><br>
<p><input type=button VALUE="d" onClick="validateForm(this.form)">
</form>

<hr>
</body>
</html>

YӻAoҳWhOL²Aڭ̾ǨqΪܪkɡANiHqlli㪺ҡC

bUdҡAڭ̹HΥdXiҡG

Example]formValidation02.htm^G

bWzdҤAڭ̰]HΥdd榡Ouxxxx-xxxx-xxxx-xxxxvA䤤C@ x ON@ӼƦrAڭ̪ҳWhOG

WzdҪlɦpUG

lɡ]formValidation02.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>ҡGHΥdX</h2>
<hr>

<script>
function validateForm(form){
	if (checkCreditCardNumber(form.cardNumber)){
		alert("ƥTL~AߨeXI");
		form.submit();
		return(true);
	}
	alert("Ʀ~ANeXI");
	form.cardNumber.focus();
	return(false);
}

function checkCreditCardNumber(control){
	var number=control.value;
	var character;
	var digit;
	if (number.length!=19){
		alert("<"+number+">Gdצ~AЬd֡I");
		return false;
	}
	for (i=0; i<19; i++){
		character=number.charAt(i);
		if ((i==4)||(i==9)||(i==14)){	// ˬdO_O "-"
			if (character!="-"){
				alert("<"+number+">GdJ~]ХHu-v}|X^AЬd֡I");
				return false;
			}
		} else {	// ˬdO_OƦr
			if (isNaN(parseInt(character))){
				alert("<"+number+">GdJ~AЬd֡I");
				return false;
			}
		}
	}
	return true;
}
</script>

пJzӤHHΥd: <p>
<form>
d:
<input type="text" name=cardNumber size=20 value="xxxx-xxxx-xxxx-xxxx"><br>
<p><input type=button VALUE="d" onClick="validateForm(this.form)">
</form>

<hr>
</body>
</html>

ƹWWzҳWhLWAuHΥdX٭nŦX@ǤqsXWhAԨѫuqΪܪkv`C

bUCdҤAڭ̹U汱iҡAWhiHѵ{XݥXAЦUŪ̿˦۸լݬݳoӽdҡG

Example]formValidation03.htm^G

WzdҪlɦpUG

lɡ]formValidation03.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>ҡGҦU</h2>
<hr>

<script>
function checkName(control) {
	if (control.value == "") {
		validatePrompt(control, "пJjWI");
		return (false);
	}
	return (true);
}

function checkPassword(control) {
	if (control.value.length != 5) {
		validatePrompt(control, "пJ׬ 5 KXI");
		return (false);
	}
	return (true);
}

function checkGender(control) {
	for (i=0; i<control.length; i++)
		if (control[i].checked)
			return(true);
	alert ("пJʧOI");
	return (false);
}

function checkNationality(control) {
	for (i=1; i<control.length; i++)
		if (control[i].selected)
			return(true);
	alert ("пJyI");
	return (false);
}

function checkHobbies(control) {
	var count=0;
	for (i=0; i<control.length; i++)
		if (control[i].selected)
			count++;
	if (count>=2)
		return(true);
	alert ("пJܤ֨˿I");
	return (false);
}

function checkComment(control) {
	if (control.value == "") {
		validatePrompt(control, "пJz_QNI");
		return (false);
	}
	return (true);
}

function validateForm(form) {
	if (!checkName(form.realname)) return;
	if (!checkPassword(form.password)) return;
	if (!checkGender(form.gender)) return;
	if (!checkNationality(form.nationality)) return;
	if (!checkHobbies(form.hobbies)) return;
	if (!checkComment(form.comments)) return;
	alert ("AשťڪܤFI\nƳqLҡI\nYNeXIII");
	document.testform.submit();	// Submit form
}

function validatePrompt(control, promptStr) {
	alert(promptStr);
	control.focus();
	return;
}
</script>

<form name=testform>
<P>QʤjWG<input type="text" name="realname" value="xxx">
<P>ӤHKXG<input type="password" name="password">
<P>zʧOG<input type="radio" name="gender" value="male"> male
	<input type="radio" name="gender" value="female"> female
<P>zyG<select name="nationality">
	<option>----<option>xW<option>饻<option>
	</select>
<P>zG<select multiple name="hobbies">
	<option>y<option>U<option selected>ť<option>\Ū<option>W
	</select>
<p>_QNG<textarea name=comments cols=40 rows=3></textarea>
<P><input type="button" value="eX" onClick="validateForm(this.form)"><input type="reset">
</form>

<hr>
</body>
</html>


JavaScript {]pPΡGΩΤ