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

  • 相关阅读:
    Keil的使用-1创建项目和工程
    UICollectionView进阶练习
    UICollectionView基础API笔记
    UICollectionView笔记2
    UICollectionView笔记1
    OC与JS交互之WKWebView
    OC与JS交互之JavaScriptCore
    OC与JS交互之UIWebView
    OC与JS交互前言
    最牛B的编码套路
  • 原文地址:https://www.cnblogs.com/zkn11199/p/5587586.html
Copyright © 2011-2022 走看看