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


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 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
详解关于Vue单元测试的几个坑
Apr 26 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短网址的生成代码(仿微博短网址)
2014/05/07 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
Python函数学习笔记
2008/10/07 Python
Python3基础之基本运算符概述
2014/08/13 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
Python Flask-web表单使用详解
2017/11/18 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
Python的形参和实参使用方式
2019/12/24 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
传播学专业毕业生自荐信
2013/11/04 职场文书
工业自动化专业毕业生推荐信
2013/11/18 职场文书
皮肤科医师岗位职责
2013/12/04 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
市场营销战略计划书
2014/05/06 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
2015年会计人员工作总结
2015/05/22 职场文书