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


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 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 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实现带重试功能的curl连接示例
2016/07/28 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
载入进度条 效果
2006/07/08 Javascript
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
详解python时间模块中的datetime模块
2016/01/13 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
python访问抓取网页常用命令总结
2017/04/11 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
在Python中使用Neo4j的方法
2019/03/14 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
Python 串口通信的实现
2020/09/29 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
业务副厂长岗位职责
2014/01/03 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书