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


Posted in Javascript onJune 16, 2016

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属性表示表单元素的标题。

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

Javascript 相关文章推荐
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 #Javascript
基于JS代码实现实时显示系统时间
Jun 16 #Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 #Javascript
jquery插件格式实例分析
Jun 16 #Javascript
详解JavaScript对象类型
Jun 16 #Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 #Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 #Javascript
You might like
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
javascript中this的四种用法
2015/05/11 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
举例介绍Python中的25个隐藏特性
2015/03/30 Python
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
高一学生评语大全
2014/04/25 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
商业融资计划书
2014/04/29 职场文书
团队拓展活动方案
2014/08/28 职场文书
司机个人年终总结
2015/03/03 职场文书
环卫个人总结
2015/03/03 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
企业安全生产规章制度
2015/08/06 职场文书