在开发系统时，往往都有某些表单数据为必填项，若用jQuery通过ID去验证，不仅会影响效率，还会有所遗漏，不易于后期维护。

本章将介绍如何利用jQuery，通过为表单配置class进行统一验证。（ID一个页面只可以使用一次；class可以多次引用）

1：为input添加class，名字可以随意设置，但每个input需要保持一致，本章案例calss设置为noNull。（若input已有class属性，可直接加到其后）

2：为input添加一个属性，用来后期通过jquery获取该字段，用作提示语。本章案例提示属性为notNull。

3：通过jQuery遍历页面中所有calss为noNull的表单，验证其是否为空，若为空，通过获取notNull的字段，进行为空提示。

具体如何设置，请参照下面的案例。本章针对input,radio,select,checkbox等类型都进行了阐述。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

</head>

<body>

    <form>

           <!-- input -->

           <div>

               姓名: <input type="text" name="name"  notNull="姓名" class="form-control noNull">

           </div>

           <br>

           <!-- radio -->

           <div>

              性别:

              男<input type="radio" name="sex" value="0" class="noNull" notNull="性别">

              女<input type="radio" name="sex" value="1" >

           </div>

           <br>

           <!-- select -->

           <div>

               年龄：

                <select name="age" class="noNull" notNull="年龄">

                    <option value ="">请选择</option>

                    <option value ="1">1</option>

                    <option value ="2">2</option>

                </select>

           </div>

           <br>

           <!-- checkbox -->

           <div>

               兴趣：

               打球<input type="checkbox" name="hobby" value="1" class="noNull" notNull="兴趣">

               唱歌<input type="checkbox" name="hobby" value="2">

               跳舞<input type="checkbox" name="hobby" value="3">

           </div>

           <br>

          <button type="button" class="btn-c" onclick="bubmi()">保存</button>

    </form>

<script src="jquery-1.9.1.min.js"></script>

<script type="text/javascript">

function bubmi(){

    $(".noNull").each(function(){

        var name = $(this).attr("name");

        if($(this).val()==""){

        alert($(this).attr('notNull')+"不能为空");return false;

        }

        if($(this).attr("type")=="radio"){

            if ($("input[name='"+name+"']:checked").size() < 1){

                alert($(this).attr('notNull')+"不能为空!");

                return false;

            }

        }

        if($(this).attr("type")=="checkbox"){

            if ($('input[name="'+name+'"]:checked').size() < 1){

                alert($(this).attr('notNull')+"不能为空!");

                return false;

            }

        }

    })

}

</script>

</body>

</html>

jquery通过class验证表单不能为空的更多相关文章

  1. 运用jQuery写的验证表单

    //运用jQuery写的验证表单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  2. jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

  3. jquery.validate 使用--验证表单隐藏域

    jQuery validate很不错的一个jQuery表单验证插件.升级到了1.9版的后,发现隐藏表单域验证全部失效,特别是在jquery.ui.tabs.min.js构造的Tabs里的验证. 是因为 ...

  4. JavaScript/Jquery：Validform 验证表单的相关属性解释

    当我们写提交表单的时候往往需要验证表单是否填写了内容,是否正确,这个插件可以很方便的完成我们需要的验证! 使用方法: 1.先引用js <script type="text/javasc ...

  5. JQuery如何在验证表单失败的情况下阻止表单提交

    自定义验证时,使用了return false和event.preventDefault(),但是验证失败之后表单还是提交了 这个问题我也碰到了,尝试了多次也没有用,在调试的时候也发现确实return了 ...

  6. MVC4中 jquery validate 不用submit方式验证表单或单个元素

    正确引入MVC4 jquery验证的相关文件 <script src="/Scripts/jquery-1.4.4.js"></script> <sc ...

  7. MVC中 jquery validate 不用submit方式验证表单或单个元素

    <script src="/Scripts/jquery-1.4.4.js"></script> <script src="/Scripts ...

  8. jQuery用面向对象的思想来编写验证表单的插件

    本人的重点是怎么构建一个简单有效可扩展的jQuery表单验证插件,这篇文章没有教你怎么用 validate plugin.我们的重点在学习一些jQuery,Javascript面向对象编程的知识. 下 ...

  9. jquery.validate验证表单

    添加引用 <script src="/${appName}/commons/js/validate/jquery.validate.min.js"></scrip ...

随机推荐

  1. WCF 实体更改发布后，如何不影响调用方？

    应用场景:使用 WCF 有一个坏处,就是如果我们经常对 WCF 应用程序更新,有时候调用方也要进行 Update Service,但调用方往往会很多,那么这个工作就会很讨厌,比如 WCF Servic ...

  2. 配置React Native环境

    一. 安装Homebrew: “Homebrew installs the stuff you need that Apple didn’t.——Homebrew  OS X 更完整”. Homebr ...

  3. java 中多线程的同步函数的运用

    /* * 需求: * 银行有一个金库 * 有两个储户,分别存300元.每次存100 , 存三次 * * 这个是有线程问题的, * * 我们应该通过下边的三个方法来查找问题 * 1.明确哪些代码是多线程 ...

  4. java 线程的开始、暂停、继续

    Android项目中的一个需求:通过线程读取文件内容,并且可以控制线程的开始.暂停.继续,来控制读文件.在此记录下. 直接在主线程中,通过wait.notify.notifyAll去控制读文件的线程( ...

  5. SAX解析技术

    SAX,全称Simple API for XML,既是指一种接口,也是指一个软件包.SAX工作原理简单地说就是对文档进行顺序扫描,当扫描到文档(document)开始与结束.元素(element)开始 ...

  6. JavaScript的三种工业化调试方法

    JavaScript的三种工业化玩法 软件工程中任何的语言如果想要写出健壮的代码都需要锋利的工具,当然JavaScript也不例外,很多朋友刚入门的时候往往因为工具选的不对而事半功倍,JavaScri ...

  7. Groovy学习--基本语法了解

    x项目用到gradle,学习gradle之前准备先过一遍Groovy的语法.这里参考:Groovy入门. 该博客没有系统的讲解Groovy的语法和原理,仅仅只是罗列了使用Groovy的常规方法.我照着 ...

  8. Latex学习笔记-序

    在写论文的过程中自学了$\LaTeX$, 想总结一下使用心得.刚开始整理了一下发现非常之乱,不知这么多零碎的知识该如何整理的有条理点,至少以后用到还能翻翻自己博客.这次写作论文图省劲用了IEEE的模板 ...

  9. Elasticsearch 教程--数据

    在Elasticsearch中,每一个文档都有一个版本号码.每当文档产生变化时(包括删除),_version就会增大.在<版本控制>中,我们将会详细讲解如何使用_version的数字来确认 ...

  10. System.Security.Cryptography.CryptographicException，密钥集不存在

    非常感谢,已经解决了.是当前用户没有权限访问证书的私钥文件的问题,之前尝试去解决,但是在对:C:\Documents and Settings\All Users\Application Data\M ...