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


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 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
微信小程序实现签到弹窗动画
Sep 21 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 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
Oracle 常见问题解答
2006/10/09 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
微信支付开发发货通知实例
2016/07/12 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
详解vue axios二次封装
2018/07/22 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
Python urlopen 使用小示例
2008/09/06 Python
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题
2019/07/04 Python
python groupby 函数 as_index详解
2019/12/16 Python
django model通过字典更新数据实例
2020/04/01 Python
python实时监控logstash日志代码
2020/04/27 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
中专毕业生求职简历的自我评价
2013/10/21 职场文书
物理课外活动总结
2014/08/27 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
初中生物教学随笔
2015/08/15 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB