JS入门到精通 第15章 使用Cookie
导读:一、练习1. 练习1 (1)源代码<!DOCTYPE> <html> <head> <meta charset="UTF-8"> <title>验证表单内容是否为空</title> <...
一、练习
1. 练习1
(1)源代码
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>验证表单内容是否为空</title>
<style type="text/css">
<!--
body,td,th {
font-size: 12px;
}
-->
</style></head>
<body>
<form id="form1" name="form1" method="post" action="">
<table id="__01" width="452" height="255" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7"><img src="images/dl_01.gif" width="452" height="81" alt="" /></td>
</tr>
<tr>
<td rowspan="3"><img src="images/dl_02.gif" width="59" height="173" alt="" /></td>
<td height="107" colspan="4" bgcolor="#FEF5CC">
<table width="285" height="98">
<tr>
<td width="96">用户名:</td>
<td width="177"><label>
<div>
<input name="name" type="text" size="22" />
</div>
</label></td>
</tr>
<tr>
<td height="33">密码:</td>
<td><label>
<div>
<input name="pwd" type="password" size="24" />
</div>
</label>
</td>
</tr>
<tr>
<td height="22" colspan="2">
</td>
</tr>
</table></td>
<td colspan="2" rowspan="2"><img src="images/dl_04.gif" width="58" height="141" alt="" /></td>
</tr>
<tr>
<td><img src="images/dl_05.gif" width="92" height="34" alt="" /></td>
<td width="78" height="34"><input type="image" name="imageField" onclick="return checkinput()" src="images/dl_06.gif" /></td>
<td width="83" height="34"><input type="image" name="imageField2" onclick="form.reset(); return false;" src="images/dl_07.gif" /></td>
<td><img src="images/dl_08.gif" width="82" height="34" alt="" /></td>
</tr>
<tr>
<td colspan="5"><img src="images/dl_09.gif" width="358" height="32" alt="" /></td>
<td><img src="images/dl_10.gif" width="35" height="32" alt="" /></td>
</tr>
<tr>
<td><img src="images/分隔符.gif" width="59" height="1" alt="" /></td>
<td><img src="images/分隔符.gif" width="92" height="1" alt="" /></td>
<td><img src="images/分隔符.gif" width="78" height="1" alt="" /></td>
<td><img src="images/分隔符.gif" width="83" height="1" alt="" /></td>
<td><img src="images/分隔符.gif" width="82" height="1" alt="" /></td>
<td><img src="images/分隔符.gif" width="23" height="1" alt="" /></td>
<td><img src="images/分隔符.gif" width="35" height="1" alt="" /></td>
</tr>
</table>
</form>
<script type="text/javascript">
function checkinput(){ //自定义函数
if(form1.name.value==""){ //判断用户名是否为空
alert("请输入用户名!");//弹出对话框
form1.name.focus();//为文本框设置焦点
return false;//返回false不允许提交表单
}
if(form1.pwd.value==""){ //判断密码是否为空
alert("请输入密码!");//弹出对话框
form1.pwd.focus();//为密码框设置焦点
return false ;//返回false不允许提交表单
}
return true;//返回true允许提交表单
}
</script>
</body>
</html>(2)运行页面
https://www.xinyizhishu.top/jsC/sc/14_1/
(3)Tips
form.reset(),form1.name.focus() 。