首页技术为王JavascriptJS入门到精通 第15章 使用Cookie

JS入门到精通 第15章 使用Cookie

分类Javascript时间2026-07-03 16:46:22发布信义之树浏览7
导读:一、练习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">&nbsp;
              </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() 。 


JS入门到精通 第14章 表单对象

游客 回复需填写必要信息