题目是这样的:编写javascirpt脚本函数“CheckInput()”实现,能够判断表单带“*”符号的必填项“您的大名“内容是否为空,为空出现提示”请正确填写!“,不为空则提示“恭喜您!”。
为表单添加“onSubmit”事件时调用编写的“CheckInput()”脚本函数,实现单击“提交留言”按钮后对必填项的输入验证。给您的大名加个JS,必填项~~谢谢网页我已经制作完成了,差这个javascirpt脚本普通网页代码如下:
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.STYLE1 {color: #FF0000}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head><body>
<table width="770" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="130" rowspan="2" bgcolor="#9CD339"> </td>
<td width="555" height="62" bgcolor="#9CD339"> </td>
</tr>
<tr>
<td align="center" valign="middle"><table width="640" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle"><div class="css" id="message-top">留言板</div></td>
</tr>
<tr>
<td height="15"><hr /></td>
</tr>
<tr>
<td><div class="css2" id="message-main">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="25" align="center" valign="middle">请在此留言</td>
</tr>
<tr>
<td><form id="messsage Form" name="messsage Form" method="post" action="">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="38%" height="50" align="left">你的大名:
<label>
<input name="yourname" type="text" id="yourname" value="" size="18" />
<span class="STYLE1">*</span></label></td>
<td width="29%" align="left">QQ:
<label>
<input name="qqno" type="text" id="qqno" size="15" maxlength="20" />
</label></td>
<td width="33%" align="center">来自:
<label>
<input name="fromcity" type="text" id="fromcity" size="18" />
</label></td>
</tr>
<tr>
<td height="50" align="left">邮箱地址:
<input name="mailbox" type="text" id="mailbox" value="" size="20" /></td>
<td align="left">性别:
<select name="sex" size="1" id="sex">
<option>保密</option>
<option>男</option>
<option>女</option>
</select></td>
<td align="center"> </td>
</tr>
<tr>
<td height="50" colspan="2" align="left" valign="middle">主 页:
<label>
<input name="vebpage" type="text" id="vebpage" size="40" />
</label></td>
<td> </td>
</tr>
<tr>
<td height="100" colspan="3" align="center" valign="bottom">内容:
<label>
<textarea name="mesageinfo" cols="75" rows="6" id="mesageinfo"></textarea>
</label></td>
</tr>
<tr>
<td height="50"> </td>
<td align="center" valign="middle"><label>
<input type="submit" name="Submit" value="提交留言" />
</label></td>
<td> </td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
为表单添加“onSubmit”事件时调用编写的“CheckInput()”脚本函数,实现单击“提交留言”按钮后对必填项的输入验证。给您的大名加个JS,必填项~~谢谢网页我已经制作完成了,差这个javascirpt脚本普通网页代码如下:
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.STYLE1 {color: #FF0000}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head><body>
<table width="770" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="130" rowspan="2" bgcolor="#9CD339"> </td>
<td width="555" height="62" bgcolor="#9CD339"> </td>
</tr>
<tr>
<td align="center" valign="middle"><table width="640" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle"><div class="css" id="message-top">留言板</div></td>
</tr>
<tr>
<td height="15"><hr /></td>
</tr>
<tr>
<td><div class="css2" id="message-main">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="25" align="center" valign="middle">请在此留言</td>
</tr>
<tr>
<td><form id="messsage Form" name="messsage Form" method="post" action="">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="38%" height="50" align="left">你的大名:
<label>
<input name="yourname" type="text" id="yourname" value="" size="18" />
<span class="STYLE1">*</span></label></td>
<td width="29%" align="left">QQ:
<label>
<input name="qqno" type="text" id="qqno" size="15" maxlength="20" />
</label></td>
<td width="33%" align="center">来自:
<label>
<input name="fromcity" type="text" id="fromcity" size="18" />
</label></td>
</tr>
<tr>
<td height="50" align="left">邮箱地址:
<input name="mailbox" type="text" id="mailbox" value="" size="20" /></td>
<td align="left">性别:
<select name="sex" size="1" id="sex">
<option>保密</option>
<option>男</option>
<option>女</option>
</select></td>
<td align="center"> </td>
</tr>
<tr>
<td height="50" colspan="2" align="left" valign="middle">主 页:
<label>
<input name="vebpage" type="text" id="vebpage" size="40" />
</label></td>
<td> </td>
</tr>
<tr>
<td height="100" colspan="3" align="center" valign="bottom">内容:
<label>
<textarea name="mesageinfo" cols="75" rows="6" id="mesageinfo"></textarea>
</label></td>
</tr>
<tr>
<td height="50"> </td>
<td align="center" valign="middle"><label>
<input type="submit" name="Submit" value="提交留言" />
</label></td>
<td> </td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
function checkInput(){
if(document.forms[0].yourname.value==""){
alert("请填上你的大名");
return false;
}
}
a) 使用客户端javascript脚本,判断用户名必须是英语字母或数字,长度6-12,如错误则弹出提示框,提示“请输入6-12位用户名”;
b)使用客户端javascript脚本,判断电子邮件是否符合带有“@”字符,如错误则弹出提示框,提示“请输入正确电子邮件”;
c) 单击“同意以下条款,提交注册信息”按钮后,调用“素材\images\loading.gif”,模拟显示前,后台交互进程普通网页代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>zc.gif</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Fireworks 8 Dreamweaver 8 target. Created Mon Dec 10 09:44:35 GMT+0800 2007-->
<style type="text/css">
<!--
td {
font-size: 12px;
line-height: 2;
}
.red {
color: #FF0000;
}
.border {
border: 2px solid #cccccc;
}
.STYLE1 {color: #666666}
-->
</style>
</head>
<body bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" width="780">
<!-- fwtable fwsrc="未命名" fwbase="zc.gif" fwstyle="Dreamweaver" fwdocid = "1563999206" fwnested="0" -->
<tr>
<td><img src="images/spacer.gif" width="43" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="102" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="21" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="419" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="161" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="34" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr> <tr>
<td rowspan="7"> </td>
<td><img src="images/zc-1.gif" alt="用户注册" width="102" height="64" /></td>
<td colspan="2" background="images/zc-4.gif"> </td>
<td background="images/zc-4.gif"> </td>
<td rowspan="7"> </td>
<td><img src="images/spacer.gif" width="1" height="64" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="2"><img src="images/zc-2.gif" width="123" height="65" /></td>
<td colspan="2" valign="bottom">(带<span class="red">*</span>的为必填项)</td>
<td><img src="images/spacer.gif" width="1" height="65" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="4"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="border">
<tr>
<td width="25%" align="left">想要的用户名:<span class="red">*</span></td>
<td width="30%"><input name="textfield" type="text" id="textfield" size="20" />
<script type=text/javascript>
pwd='abc';
if (! pwd.match(/^[0-9a-zA-Z]{6,12}$/)) alert('请输入6-12位用户名');
</script> </td>
<td>4-20字符(包括小写字母、数字、中文),一个汉字为两个字符,<span class="red">请使用中文会员名</span></td>
</tr>
</table></td>
<td><img src="images/spacer.gif" width="1" height="51" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="4"><table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="50" align="center"><span class="STYLE1">提示:您可以先检查您想要的用户名是否已经被别人注册</span></td>
</tr>
<tr>
<td height="50" align="center"><input type="button" name="button" id="button" value="检查会员名是否可用" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center">
</td>
</tr>
</table></td>
<td><img src="images/spacer.gif" width="1" height="79" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="zc_r5_c2" src="images/zc-3.gif" width="102" height="70" border="0" id="zc_r5_c2" alt="" /></td>
<td colspan="3" valign="bottom">(带<span class="red">*</span>的为必填项)</td>
<td><img src="images/spacer.gif" width="1" height="70" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="4"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>提示问题:<span class="red">*</span>
<select name="select" id="select">
<option>==请选择提示问题==</option>
</select></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>您的性别:<span class="red">*
<input type="radio" name="radio" id="radio" value="radio" />
</span>男
<span class="red">
<input type="radio" name="radio2" id="radio2" value="radio2" />
</span>女</td>
<td> </td>
</tr>
<tr>
<td>电子邮件地址:<span class="red">*</span>
<input type="text" onChange="check_email(this.value);"> <script language=javascript>
function check_email(s){
if (s.indexOf('.')>=0 && s.indexOf('@')>=0 && s.indexOf('.')>s.indexOf('@')+1)
alert(s+'像个邮件地址');
else alert('请输入正确电子邮件');
}
</script></td>
<td>推荐电子邮件:<a href="http://mail.qq.com">QQ邮箱</a>,<a href="http://mail.sogou.com">sogou邮箱</a></td>
</tr>
<tr>
<td height="50" colspan="2" align="center"><SCRIPT LANGUAGE="JavaScript">
function reP(){
document.getElementById('oImg').style.display = "block";
}
</SCRIPT>
<img src="file:///D|/My Documents\网页设计制作员_4级_样题\素材\1.2.1/1.2.1.1.gif" width="700" height="150" ' id="oImg" style='display:none'>
<INPUT TYPE="button" value='检查会员名是否可用' onclick="reP()"></td>
</tr>
</table></td>
<td><img src="images/spacer.gif" width="1" height="348" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="4"> </td>
<td><img src="images/spacer.gif" width="1" height="57" border="0" alt="" /></td>
</tr>
</table>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>zc.gif</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Fireworks 8 Dreamweaver 8 target. Created Mon Dec 10 09:44:35 GMT+0800 2007-->
<style type="text/css">
<!--
td {
font-size: 12px;
line-height: 2;
}
.red {
color: #FF0000;
}
.border {
border: 2px solid #cccccc;
}
.STYLE1 {color: #666666}
-->
</style>
</head>
<body bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" width="780">
<!-- fwtable fwsrc="未命名" fwbase="zc.gif" fwstyle="Dreamweaver" fwdocid = "1563999206" fwnested="0" -->
<tr>
<td><img src="images/spacer.gif" width="43" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="102" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="21" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="419" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="161" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="34" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr> <tr>
<td rowspan="7"> </td>
<td><img src="images/zc-1.gif" alt="用户注册" width="102" height="64" /></td>
<td colspan="2" background="images/zc-4.gif"> </td>
<td background="images/zc-4.gif"> </td>
<td rowspan="7"> </td>
<td><img src="images/spacer.gif" width="1" height="64" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="2"><img src="images/zc-2.gif" width="123" height="65" /></td>
<td colspan="2" valign="bottom">(带<span class="red">*</span>的为必填项)</td>
<td><img src="images/spacer.gif" width="1" height="65" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="4"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="border">
<tr>
<td width="25%" align="left">想要的用户名:<span class="red">*</span></td>
<td width="30%"><input name="textfield" type="text" id="textfield" size="20" /> </td>
<td>4-20字符(包括小写字母、数字、中文),一个汉字为两个字符,<span class="red">请使用中文会员名</span></td>
</tr>
</table></td>
<td><img src="images/spacer.gif" width="1" height="51" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="4"><table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="50" align="center"><span class="STYLE1">提示:您可以先检查您想要的用户名是否已经被别人注册</span></td>
</tr>
<tr>
<td height="50" align="center"><input type="button" name="button" id="button" value="检查会员名是否可用" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center">
</td>
</tr>
</table></td>
<td><img src="images/spacer.gif" width="1" height="79" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="zc_r5_c2" src="images/zc-3.gif" width="102" height="70" border="0" id="zc_r5_c2" alt="" /></td>
<td colspan="3" valign="bottom">(带<span class="red">*</span>的为必填项)</td>
<td><img src="images/spacer.gif" width="1" height="70" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="4"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>提示问题:<span class="red">*</span>
<select name="select" id="select">
<option>==请选择提示问题==</option>
</select></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>您的性别:<span class="red">*
<input type="radio" name="radio" id="radio" value="radio" />
</span>男
<span class="red">
<input type="radio" name="radio2" id="radio2" value="radio2" />
</span>女</td>
<td> </td>
</tr>
<tr>
<td>电子邮件地址:<span class="red">*</span>
<input type="text" onChange="check_email(this.value);"></td>
<td>推荐电子邮件:<a href="http://mail.qq.com">QQ邮箱</a>,<a href="http://mail.sogou.com">sogou邮箱</a></td>
</tr>
<tr>
<td height="50" colspan="2" align="center">
<INPUT TYPE="button" value='检查会员名是否可用' onclick="reP()"></td>
</tr>
</table></td>
<td><img src="images/spacer.gif" width="1" height="348" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="4"> </td>
<td><img src="images/spacer.gif" width="1" height="57" border="0" alt="" /></td>
</tr>
</table>
</body>
</html>