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


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代码
Aug 01 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
常规表格多表头查询示例
Feb 21 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
js调用刷新界面的几种方式
May 03 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 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
使用数据库保存session的方法
2006/10/09 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
loading动画特效小结
2017/01/22 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
教学个人的自我评价分享
2014/02/16 职场文书
新品发布会主持词
2014/04/02 职场文书
主题团日活动总结
2014/06/25 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
感谢信模板大全
2015/01/23 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
python使用BeautifulSoup 解析HTML
2022/04/24 Python
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS