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


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 相关文章推荐
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
jquery异步循环获取功能实现代码
Sep 19 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
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
apache php模块整合操作指南
2012/11/16 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
csdn 博客的css样式 v3
2009/02/24 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
python分析网页上所有超链接的方法
2015/05/08 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
python自动生成model文件过程详解
2019/11/02 Python
python操作toml文件的示例代码
2020/11/27 Python
JAVA中运算符的分类及举例
2015/09/12 面试题
九月份红领巾广播稿
2014/01/22 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
超级礼物观后感
2015/06/15 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL