在开发系统时，往往都有某些表单数据为必填项，若用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. “英雄之旅”见闻和小结----angular2系列（三)

    前言: 本系列在前面两篇文章,介绍了Zone.js和angular2的基础概念.而后对于ng2的学习,还是由官方的 Tour of Heroes 开始. 以下内容经过提炼和个人理解,当然也会有不正确的 ...

  2. 【NET MVC】View

    通过阅读一些书籍,结合源代码,稍微深入的学习了Asp.Net MVC中的视图View 任何类型的响应都可以利用当前HttpResponse来响应,MVC可以通过Controller的Response属 ...

  3. Oracle 10g安全加固(审计、监听密码)

    环境: Linux 6.4 + Oracle 10.2.0.4 1. Oracle 10g 审计功能 2. 对数据库监听器的关闭和启动设置密码 1. Oracle 10g 审计功能 Oracle 10 ...

  4. 彻底解决低端安卓手机touchend事件不触发（考虑scroll）

    本次移动端开发时遇见了安卓4.2系统不能触发touchend的问题,有以下需求. 1. 横滑轮播图 2.下拉刷新页面内容 3.body滚动条不能失效 开始在轮播图touchmove事件中阻止了浏览器默 ...

  5. Ubuntu下搭建ryu环境

    RYU环境搭建总共四步: step1:首先下载相应的python套件,并且更新pip $ sudo apt-get install python-pip python-dev build-essent ...

  6. composer安装yii2问题总结

    今天周六,在家安装yii2的advanced版本, 过程有些坎坷, 不过最后总算安装好了. 总结一下, 主要遇到下面两个问题: 1, 下载速度慢, 主要原因是网络问题 下载yii2时, 模板(除了ve ...

  7. hexo在git上搭建个人博客

    公司实习第一天接到的任务是:搭建一个基于Nodejs的开源项目的开发环境,接到任务时以为不是很困难,后来才知道该项目已于去年被废弃,搭配环境的时候遇到了不少问题,折腾了两天还是没有最终完成... 不过 ...

  8. Moon.Orm版本维护及下载（跟踪报道）

    提示:最下面有最新的下载地址  历史记录: ).-- :: 支持Mysql,Sqlserver(点击下载) ).2013年9月14日,代码重构,加入oracle.复合主键功能(点击下载) )--,为d ...

  9. .NET 内存基础(通过内存体验类型、传参、及装箱拆箱)

    该随笔受启发于<CLR Via C#(第三版)>第四章4.4运行时的相互联系 一.内存分配的几个区域 1.线程栈 局部变量的值类型 和 局部变量中引用类型的指针(或称引用)会被分配到该区域 ...

  10. 【原创】SQL分页查询存储过程

    ------------------------------------- -----作者:张欣宇 -----时间:2013-06-28 -----简介:根据参数和条件分页查询 ----------- ...