在开发系统时，往往都有某些表单数据为必填项，若用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. YII 的源码分析(二)

    上一篇简单分析了一下yii的流程,从创建一个应用,到屏幕上输出结果.这一次我来一个稍复杂一点的,重点在输出上,不再是简单的一行"hello world",而是要经过view(视图) ...

  2. 小菜学习Winform（五）窗体间传递数据

    前言 做项目的时候,winfrom因为没有B/S的缓存机制,窗体间传递数据没有B/S页面传递数据那么方便,今天我们就说下winfrom中窗体传值的几种方式. 共有字段传递 共有字段传递实现起来很方便, ...

  3. Spring对事务管理的支持的发展历程--转

    原文地址:http://www.iteye.com/topic/1123049 1.问题 Connection conn = DataSourceUtils.getConnection(); //开启 ...

  4. 改用C++生成自动化数据表

    改用C++生成自动化数据表 前面的文章中,我们讨论了使用一个基于.NET的第三方程序库来从程序中来生成数据表.在我看来,这整个思路是非常有用的,例如为显示测试结果.我经常会自己在博客中尝试各种像这样的 ...

  5. iOS编译FFmpeg、kxmovie实现视频播放 （转载）

    由于FFmpeg开源框架的功能非常强大,可以播放的视频种类很多,同时添加第三方库kxmovie,实现视频播放,真的是爽爆了,因此今天来说一下关于FFmpeg在iOS手机上的一些配置过程,配置工具,还有 ...

  6. Tools - Docker与Vagrant

    Docker Docker - HomePage Wiki - Docker Docker简介 Overview Docker 是一个开源的应用容器引擎,基于 Go 语言并遵从 Apache2.0 协 ...

  7. C#创建安全的栈(Stack)存储结构

    在C#中,用于存储的结构较多,如:DataTable,DataSet,List,Dictionary,Stack等结构,各种结构采用的存储的方式存在差异,效率也必然各有优缺点.现在介绍一种后进先出的数 ...

  8. sessionid如何产生？由谁产生？保存在哪里？

    面试问道这个我居然不知道怎么回答,当然也是因为我确实没有研究过.下面就是百度了一篇文章后简单回答这个问题. 参考:http://www.cnblogs.com/sharpxiajun/p/339560 ...

  9. membership与成员资格

    membership成员资格是ASP.NET 成员资格为您提供了一种验证和存储用户凭据的内置方法.因此,ASP.NET 成员资格可帮助您管理网站中的用户身份验证.它包含以下功能 创建新用户和密码. 将 ...

  10. linq lambda let

    1.linq let用法 var query = from x in db.Users let theage = x.age let sexstring = x.sex ? "男" ...