zoukankan      html  css  js  c++  java
  • 检查表单元素的值是否为空

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

  • 相关阅读:
    201521044091《Java程序设计》第7周学习总结
    201521044091《java程序设计》第四次总结
    201521044091 《java程序设计》第八周学习总结
    201521044091 《Java程序设计》第5周学习总结
    201521044091 《Java程序设计》第2周学习总结
    201521044091 《Java程序设计》第3周学习总结
    MySQL设置字符集CHARACTER SET
    Create My MySQL configuration by Percona
    How to use jQuery to manipulate Cookies
    How to use OpenXml to import xml data to Sql server
  • 原文地址:https://www.cnblogs.com/zkn11199/p/5587586.html
Copyright © 2011-2022 走看看