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


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 相关文章推荐
jQuery Div中加载其他页面的实现代码
Feb 27 Javascript
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
ES6基础之默认参数值
Feb 21 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 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/12/06 PHP
PHP中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
javascript 自动转到命名锚记
2009/01/10 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
Python用字典构建多级菜单功能
2019/07/11 Python
python两个list[]相加的实现方法
2020/09/23 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
小学红领巾中秋节广播稿
2014/01/13 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
教师师德承诺书2016
2016/03/25 职场文书
诚信高考倡议书
2019/06/24 职场文书