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


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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
php判断当前操作系统类型
2015/10/28 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
python reverse反转部分数组的实例
2018/12/13 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
python爬取代理ip的示例
2020/12/18 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
服装设计专业毕业生求职信
2014/04/09 职场文书
公司2014年度工作总结
2014/12/10 职场文书
2015年组织部工作总结
2015/04/03 职场文书
新闻通讯稿范文
2015/07/22 职场文书
研讨会致辞
2015/07/31 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
springboot中一些比较常用的注解总结
2021/06/11 Java/Android