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


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 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
前端jquery部分很精彩
May 03 Javascript
js select实现省市区联动选择
Apr 17 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
微信小程序实现购物车小功能
Dec 30 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
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
python3.5仿微软计算器程序
2020/03/30 Python
python代码实现ID3决策树算法
2017/12/20 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
python实现排序算法解析
2018/09/08 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
运动会800米加油稿
2014/02/22 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
国窖1573广告词
2014/03/21 职场文书
遗嘱继承公证书
2014/04/09 职场文书
小学假期安全广播稿
2014/09/28 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
土地租赁协议书
2015/01/29 职场文书
入党个人总结范文
2015/03/02 职场文书
世界文化遗产导游词
2019/08/07 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
Go 语言结构实例分析
2021/07/04 Golang