题目是这样的:编写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">&nbsp;</td>
    <td width="555" height="62" bgcolor="#9CD339">&nbsp;</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">&nbsp;</td>
                  </tr>
                  <tr>
                    <td height="50" colspan="2" align="left" valign="middle">主 &nbsp;&nbsp;&nbsp;页:
                      <label>
                      <input name="vebpage" type="text" id="vebpage" size="40" />
                      </label></td>
                    <td>&nbsp;</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">&nbsp;</td>
                    <td align="center" valign="middle"><label>
                      <input type="submit" name="Submit" value="提交留言" />
                    </label></td>
                    <td>&nbsp;</td>
                  </tr>
                </table>
              </form>
              </td>
            </tr>
          </table>
        </div></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

解决方案 »

  1.   

    <form id="messsage Form" name="messsage Form" method="post" action="" onSubmit="return checkInput()"/>
    function checkInput(){
        if(document.forms[0].yourname.value==""){
            alert("请填上你的大名");
            return false;
        }
    }
      

  2.   

    非常感谢楼主~~~~虽然对你来说是很简单~~~~不过帮助了我~~~~~THANKS还有个问题~~~嘿嘿~编写javascript,完成注册页面输入项正确性的验证过程。
    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">&nbsp;</td>
       <td><img src="images/zc-1.gif" alt="用户注册" width="102" height="64" /></td>
       <td colspan="2" background="images/zc-4.gif">&nbsp;</td>
       <td background="images/zc-4.gif">&nbsp;</td>
       <td rowspan="7">&nbsp;</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>&nbsp;</td>
           <td>&nbsp;</td>
         </tr>
         <tr>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
         </tr>
         <tr>
           <td>提示问题:<span class="red">*</span>
             <select name="select" id="select">
               <option>==请选择提示问题==</option>
                      </select></td>
           <td>&nbsp;</td>
         </tr>
         <tr>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
         </tr>
         <tr>
           <td>&nbsp;</td>
           <td>&nbsp;</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>&nbsp;</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">&nbsp;</td>
       <td><img src="images/spacer.gif" width="1" height="57" border="0" alt="" /></td>
      </tr>
    </table>
    </body>
    </html>
      

  3.   

    上面那个代码有错下面这个<!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">&nbsp;</td>
       <td><img src="images/zc-1.gif" alt="用户注册" width="102" height="64" /></td>
       <td colspan="2" background="images/zc-4.gif">&nbsp;</td>
       <td background="images/zc-4.gif">&nbsp;</td>
       <td rowspan="7">&nbsp;</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>&nbsp;</td>
           <td>&nbsp;</td>
         </tr>
         <tr>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
         </tr>
         <tr>
           <td>提示问题:<span class="red">*</span>
             <select name="select" id="select">
               <option>==请选择提示问题==</option>
                      </select></td>
           <td>&nbsp;</td>
         </tr>
         <tr>
           <td>&nbsp;</td>
           <td>&nbsp;</td>
         </tr>
         <tr>
           <td>&nbsp;</td>
           <td>&nbsp;</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>&nbsp;</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">&nbsp;</td>
       <td><img src="images/spacer.gif" width="1" height="57" border="0" alt="" /></td>
      </tr>
    </table>
    </body>
    </html>