表单提交的验证

最新推荐文章于 2024-07-03 14:11:34 发布

最新推荐文章于 2024-07-03 14:11:34 发布 · 187 阅读

文章标签：

#表单 #验证

JavaScript 专栏收录该内容

188 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的表单验证方法，该方法能够在提交表单前检查所有文本框是否为空，并阻止空文本框的提交。同时，文章还展示了如何通过表单的onreset事件实现表单重置。

一应用

提交表单时，通过onsubmit事件来判断表单中是否有空文本框，如果有，则不允许提交，并通过表单的onreset事件将表单中的文本框清空，以便重新输入信息。

二代码

<table width="487" height="333" border="0" align="center" cellpadding="0" cellspacing="0" background="bg.JPG">
 <tr>
 <td align="center" valign="top"><br>
 <br>
 <br>
 <br> <br> <table width="86%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#6699CC">
 <form name="form1" onReset="return AllReset()" onsubmit="return AllSubmit()">
 <tr bgcolor="#FFFFFF">
 <td height="22" align="right">所属类别:</td>
 <td height="22" align="left">  
 <select name="txt1" id="txt1">
 <option value="数码设备">数码设备</option>
 <option value="家用电器">家用电器</option>
 <option value="礼品工艺">礼品工艺</option>
 </select>
 <select name="txt2" id="txt2">
 <option value="数码相机">数码相机</option>
 <option value="打印机">打印机</option>
 </select></td>
 </tr>
 <tr bgcolor="#FFFFFF">
 <td height="22" align="right">商品名称:</td>
 <td height="22" align="left"><input name="txt3" type="text" id="txt3" size="30" maxlength="50"></td>
 </tr>
 <tr bgcolor="#FFFFFF">
 <td height="22" align="right">会员价:</td>
 <td height="22" align="left"><input name="txt4" type="text" id="txt4" size="10"></td>
 </tr>
 <tr bgcolor="#FFFFFF">
 <td height="22" align="right">提供厂商:</td>
 <td height="22" align="left"><input name="txt5" type="text" id="txt5" size="30" maxlength="50"></td>
 </tr>
 <tr bgcolor="#FFFFFF">
 <td height="22" align="right">商品简介:</td>
 <td height="22" align="left"><textarea name="txt6" cols="35" rows="4" id="txt6"></textarea></td>
 </tr>
 <tr bgcolor="#FFFFFF">
 <td height="22" align="right">商品数量:</td>
 <td height="22" align="left"><input name="txt7" type="text" id="txt7" size="10"></td>
 </tr>
 <tr bgcolor="#FFFFFF">
 <td height="22" colspan="2" align="center"><input name="sub" type="submit" id="sub2" value="提交">
&nbsp;
 <input type="reset" name="Submit2" value="重 置"></td>
 </tr>
 </form>
 </table></td>
 </tr>
</table>
<script language="javascript">
<!--
function AllReset()
{
 if (window.confirm("是否进行重置？"))  //弹出提示框
 return true;
 else
 return false;
}
function AllSubmit()
{
 var T=true;
 var e=window.event;
 var obj=e.srcElement;
 for (var i=1;i<=7;i++) //按指定名称遍历表单中的控件
 {
 if (eval("obj."+"txt"+i).value=="") //判断当前控件的值是否为空
 {
 T=false;
 break;  //退出本次循环
 }
 }
 if (!T)  //当表单中的控件有空值时
 {
 alert("提交信息不允许为空");
 }
 return T; //返回布尔型值
}
//-->
</script>

三运行结果

图7_19.png