检查表单元素的值是否为空的实例代码

前端技术 2023/09/07 JavaScript

1.概述

在实际的开发过程中，经常需要判断用户提交的表单中某个元素的值是否为空，还有一种情况是表单中所有元素的值都不允许为空。本实例将介绍一种简单有效的判断表单中所有元素是否为空的方法。

2.技术要点

主要是在JavaScript中通过循环form对象的elements属性来实现。form对象的elements属性也就是页面中form表单的所有元素的数组，例如，form.elements[0]表示表单第一个元素对象，form.elements[n]表示表单第n个元素对象。

3.具体实现代码

（1）新建index.jsp表单页，该页的表单中包含3个不允许为空的元素和一个提交按钮，并且需要定义一个表单的id属性值，关键代码如下：

<form action=\"\" id=\"myform\">
<table align=\"center\">
<tr>
<td>留言人：</td>
<td>
<input type=\"text\" name=\"messageUser\" title=\"留言人\"> 
</td>
</tr>
<tr>
<td>留言标题：</td>
<td>
<input type=\"text\" name=\"messageTitle\" title=\"留言标题\"> 
</td>
</tr>
<tr>
<td>留言内容：</td>
<td>
<textarea rows=\"8\" cols=\"45\" title=\"留言内容\"></textarea>
</td>
</tr>
<tr>
<td align=\"center\" colspan=\"2\">
<input type=\"button\" value=\"提 交\" onclick=\"check()\">
</td>
</tr>
</table>
</form>

（2）在该页的<script>标签中编写验证表单元素的值不允许为空的方法，关键代码如下：

function check(){
var myform = document.getElementById(\"myform\"); //获得form表单对象
for(var i=0;i<myform.length;i++){ //循环form表单
if(myform.elements[i].value==\"\"){ //判断每一个元素是否为空
alert(myform.elements[i].title+\"不能为空！\");
myform.elements[i].focus(); //元素获得焦点
return ;
}
}
myform.submit();
}

在JavaScript中，form表单对象的elements属性的value属性表示指定元素的值；name属性表示指定表单元素的名称；title属性表示表单元素的标题。

以上所述是小编给大家介绍的检查表单元素的值是否为空的实例代码的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/18016

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案