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


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_13_执行模型详解
Oct 20 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
Javascript玩转继承(一)
May 08 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 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读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
jquery里的each使用方法详解
2010/12/22 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
详解django中使用定时任务的方法
2018/09/27 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
python中树与树的表示知识点总结
2019/09/14 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
Python代码注释规范代码实例解析
2020/08/14 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
用python实现一个简单的验证码
2020/12/09 Python
python中的对数log函数表示及用法
2020/12/09 Python
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
租车协议书范本2014
2014/11/17 职场文书
2014公司年终工作总结
2014/12/19 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书