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

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属性表示表单元素的标题。

以上所述是小编给大家介绍的检查表单元素的值是否为空的实例代码的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JavaScript检查表单是否为空的函数

    var textboxs = new Array(); // text类型的input集合    var radioList = new Object(); // radio类型的input集合,因为Radio比较特殊,要一组一组检测,所以这里用一个Hashtable,根据radio的name作为Key来保存所有的Radio集合    var radioes; // 每一个name对应的Radio集合    var inputs = myform.getElementsByTagName("IN

  • javascript检查表单数据是否改变的方法

    有的时候,需要检查用户是否修改了一个表单中的内容,则可以使用下面的技巧,其中如果修改了表单的内容则返回true,没修改表单的内容则返回false.代码如下: 复制代码 代码如下: function formIsDirty(form) { for (var i = 0; i < form.elements.length; i++) { var element = form.elements[i]; var type = element.type; if (type == "checkbox&

  • 基于jquery实现即时检查格式是否正确的表单

    现在很多网站的注册模块都可以实现即时检查格式是否正确,这样极大的增强了用户体验,对开发非常有利. 下面的代码是利用jquery实现了对一个表单字段格式的即时检查(包括字段长度.邮箱格式),同时在提交时,再次出发检查事件. 注意这个检查是keyup和focus上为主,利用这两个事件来触发blur(失去焦点)事件. <html> <head> <meta charset="utf-8" /> <title></title> <

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

    1.概述 在实际的开发过程中,经常需要判断用户提交的表单中某个元素的值是否为空,还有一种情况是表单中所有元素的值都不允许为空.本实例将介绍一种简单有效的判断表单中所有元素是否为空的方法. 2.技术要点 主要是在JavaScript中通过循环form对象的elements属性来实现.form对象的elements属性也就是页面中form表单的所有元素的数组,例如,form.elements[0]表示表单第一个元素对象,form.elements[n]表示表单第n个元素对象. 3.具体实现代码 (1

  • Django model.py表单设置默认值允许为空的操作

    blank=True 默认值为blank=Flase,表示默认不允许为空, blank=True admin级别可以为空 null=True 默认值为null=Flase,表示默认不允许为空 null=True 数据库级别可以为空 补充知识:Django中models.py字段选项null和blank的区别和使用 1.null 如果null=True,数据库中空值储存为NULL,默认为False. 2.blank 如果blank=True,则允许字段为空.默认为False. 需要注意的是,这不同

  • JQuery表单元素取值赋值方法总结

    JQuery表单元素取值赋值方法总结

    一.普通文本框的赋值与取值 1.1.1赋值 <h2>jQuery 表单元素取值与赋值方法总结</h2> <input type="text" class="test1"/> <input type="button" value="赋值" onclick="get()"/> <input type="text" class="

  • BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码

    BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码

    在某些情况下,反馈图标未正确显示.默认情况下,Bootstrap定义反馈图标位置如下: .has-feedback .form-control-feedback { top: 25px; right: 0; } .form-horizontal .has-feedback .form-control-feedback { top: 0; right: 15px; } 通过自定义值top和right属性,您可以将反馈图标调整为应有的位置. 按钮组 .btn-group .form-control-

  • java的Map集合中按value值进行排序输出的实例代码

    java的Map集合中按value值进行排序输出的实例代码 import java.util.Arrays; import java.util.Comparator; import java.util.HashMap; import java.util.Map; import java.util.Set; public class Test { public static void main(String[] args) { Map<String ,Integer> map = new Has

  • 离开页面时检测表单元素是否被修改,提示保存的js代码

    复制代码 代码如下: window.onbeforeunload = function() { if(is_form_changed()) { return "您的修改内容还没有保存,您确定离开吗?"; } } function is_form_changed() { var t_save = jQuery("#t_save"); //检测页面是否要保存按钮 if(t_save.length>0) { //检测到保存按钮,继续检测元素是否修改 var is_c

  • Java泛型映射不同的值类型详解及实例代码

    Java泛型映射不同的值类型详解 前言: 一般来说,开发人员偶尔会遇到这样的情形: 在一个特定容器中映射任意类型的值.然而Java 集合API只提供了参数化的容器.这限制了类型安全地使用HashMap,如单一的值类型.但如果想混合苹果和梨,该怎样做呢? 幸运的是,有一个简单的设计模式允许使用Java泛型映射不同的值类型,Joshua Bloch在其<Effective Java>(第二版,第29项)中将其描述为类型安全的异构容器(typesafe hetereogeneous Containe

  • Vue中通过属性绑定为元素绑定style行内样式的实例代码

    1.直接在元素上通过:style的形式,书写样式对象 <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1> 2.将样式对象定义在data中,并直接引用到:style中 1:在data上定义样式 data:{ styleObj1:{color:'blue','font-weight':200,'font-size':'40px'}, } 2:在元素中,通过属性绑定的形式,将样式对象应用到元素中 <h

  • Python excel合并居中值相同的单元格实例代码

    Python excel合并居中值相同的单元格实例代码

    目录 前言 处理前的单元格 代码分解讲解 总结 前言 这里要说明一下,本文包含的代码其中一部分并不是自己写的,是我找了很多文章拼凑出来的,比如如何找相同内容的单元格.怎么合并.怎么居中等等.出处许多,这边就不一个个放链接了.就当做一份自己写的学习笔记供大家参考. 本文结构 是分段讲解代码,文末放全部的代码 处理前的单元格   -----------------------> 可以看到有一些名字是重复的,我们现在要做的就是把这些重复的名字合并居中,程序执行完的效果如图. (大家可能会说,这不是多此

  • Ajax中通过JS代码自动获取表单元素值的示例代码

    我们在使用Ajax的时候,通常需要获取表单元素值,然后发送给后台的服务器端程序处理.如果表单元素不多的情况我们常常会通过GET方式来获取表单元素值,但如果表单元素非常多,此时就需要用POST方式来获取表单元素值,那么如何来获取表单元素值呢?下面给出一段JS代码即可自动获取表单元素的值了. function getFormQueryString(frmID) //frmID是表单的ID号,请在表单form中先命名一个ID号 { var frmID=document.getElementById(f

随机推荐