在开发系统时，往往都有某些表单数据为必填项，若用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. GROUP BY的扩展

    GROUP BY的扩展主要包括ROLLUP,CUBE,GROUPING SETS三种形式. ROLLUP rollup相对于简单的分组合计增加了小计和合计,解释起来会比较抽象,下面我们来看看具体事例. ...

  2. 【记录】JS toUpperCase toLowerCase 大写字母/小写字母转换

    小写:toLowerCase() 大写:toUpperCase() 示例代码: <script type="text/javascript" language="j ...

  3. 磁盘操作系统（DOS）

    一.概要 Disk Operation System(DOS)即磁盘操作系统,与win7一样是一个操作系统,字符界面,单用户,单任务. dos,是磁盘操作系统的缩写,是个人计算机上的一类操作系统.从1 ...

  4. Oracle 11g 编译使用BBED

    环境:RHEL 6.4 + Oracle 11.2.0.4 1. 拷贝缺失文件 2. 编译BBED 3. BBED使用测试 Reference 1. 拷贝缺失文件 11g中缺失几个相关文件,但我们实际 ...

  5. jackson error 含义log

    1. 反序列化失败,类型不匹配 Caused by: com.fasterxml.jackson.databind.JsonMappingException: Can not deserial ize ...

  6. ajax+php+js实现异步刷新表单验证

    创建ajax对象 //创建对象 function createAjax(){ var request =false; //IE浏览器,window对象存在ActiveXObject属性 if(wind ...

  7. 2.简单的Code First例子（EF Code-First系列）

    现在假想,我们想要为讴歌学校创建一个应用程序,这个程序需要能够来添加或者更新学生,分数,教师还有课程信息. 代替之前我们的做法:先是创建数据库,现在我们不这么做,我们先来创建领域类,首先我来创建两个简 ...

  8. TeamCity : 安装 Agent

    笔者在前文中介绍了 TeamCity Server 的安装过程,本文介绍在 Ubuntu Server 14.04 中安装 TeamCity Agent.Ubuntu Server 上已经创建了用户 ...

  9. iOS学习笔记——键盘处理

    在网上找到的资料比较零散,这部分学起来感觉也有点空虚,内容就只包括隐藏键盘和键盘高度两部分 隐藏键盘其实就在我学习iOS开发的第一个程序里面已经实践过了,不过当时还懵懵懂懂,现在就了解了是什么一回事, ...

  10. 转载：《TypeScript 中文入门教程》 11、声明合并

    版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 TypeScript有一些独特的概念,有的是因为我们需要描述JavaScript ...