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


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类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
javascript中的void运算符语法及使用介绍
Mar 10 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 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
福利彩票幸运号码自动生成器
2006/10/09 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
Python 忽略warning的输出方法
2018/10/18 Python
Django web框架使用url path name详解
2019/04/29 Python
django 微信网页授权登陆的实现
2019/07/30 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
django queryset相加和筛选教程
2020/05/18 Python
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
中医药大学市场营销专业自荐信
2013/09/29 职场文书
自主招生自荐信格式
2013/12/03 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
委托收款证明
2015/06/23 职场文书
整脏治乱工作简报
2015/07/21 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书