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


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编写trim()函数及正则表达式的运用
Oct 24 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
JavaScript如何实现图片处理与合成
May 29 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脚本数据库功能详解(上)
2006/10/09 PHP
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
任意位置显示html菜单
2007/02/01 Javascript
javascript 获取网页参数系统
2008/07/19 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
python将三维数组展开成二维数组的实现
2019/11/30 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
金融专业个人求职信范文
2013/11/28 职场文书
应用化学专业职业生涯规划书
2013/12/31 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
JavaScript实现两个数组的交集
2022/03/25 Javascript
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python