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


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 相关文章推荐
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
js实现图片上传即时显示效果
Sep 30 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 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
德生PL660的电路分析和打磨
2021/03/02 无线电
php多文件上传功能实现原理及代码
2013/04/18 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
PHP递归创建多级目录
2015/11/05 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
在Python中处理XML的教程
2015/04/29 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
Django 自动生成api接口文档教程
2019/11/19 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
体育教育毕业生自荐信
2013/11/21 职场文书
理想国读书笔记
2015/06/25 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
详解Redis复制原理
2021/06/04 Redis
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js