在开发系统时，往往都有某些表单数据为必填项，若用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. 如何用Perl对Excel的数据进行提取并分析

    巡检类工作经常会出具日报,最近在原有日报的基础上又新增了一个表的数据量统计日报,主要是针对数据库中使用较频繁,数据量又较大的31张表.该日报有两个sheet组成,第一个sheet是数据填写,第二个sh ...

  2. EntityFramework 7 Linq Contains In 奇怪问题（已修复）

    问题说明: 博客问题纪录 Use EF7, Linq Contains In is error. EF7 Code Commit adding (client side) support for Co ...

  3. ASP.NET MVC中使用Unity Ioc Container

    写在前面 安装Unity 添加服务层 IArticleRepository类型映射 服务注入到控制器 Global.asax初始化 后记 关于Unity的使用可以参照<Unity依赖注入使用详解 ...

  4. Understanding delete

    简述 我们都知道无法通过delete关键字针对变量和函数进行操作,而对于显示的对象属性声明却可以进行,这个原因需要深究到js的实现层上去,让我们跟随 Understanding delete 来探究一 ...

  5. Ajax提交参数的值中带有html标签不能提交成功的解决办法（ASP.NET）

    最近在公司做资源及文章上传功能遇到一个小问题,被坑了好半天. 该功能就类似利用富文本编辑器发布信息,但是用Ajax提交数据,因此提交参数值中不可避免的含有html标签. 在本地运行代码一直没问题,总是 ...

  6. PHP配置限制文件大小上传

    修改PHP上传文件大小限制的方法1. 一般的文件上传,除非文件很小.就像一个5M的文件,很可能要超过一分钟才能上传完.但在php中,默认的该页最久执行时间为 30 秒.就是说超过30秒,该脚本就停止执 ...

  7. 从SqlServer转手Oracle的一些坑

    为将SqlSugar ORM转制成OracleSugar ORM 本想一天搞定,凭着经验不看任何Oracle资料就直接强上了,但是从配置PLSQL和一些语法区别带来了很多坑让我进度放缓 这个贴子对于身 ...

  8. 开源服务专题之------ssh防止暴力破解及fail2ban的使用方法

    15年出现的JAVA反序列化漏洞,另一个是redis配置不当导致机器入侵.只要redis是用root启动的并且未授权的话,就可以通过set方式直接写入一个authorized_keys到系统的/roo ...

  9. asp.net MVC 回顾 Html.ActionLink

    在asp.net MVc中想生成一个超链接有很多种方式,通过直接输入<a>.Html.ActionLink.Html.RouteLink等等,今天我们要阐述的就是Html.ActionLi ...

  10. Autofac - 事件

    Autofac在提供之前那些方法的时候, 同时提供了五个事件, 这一篇就看一下这几个事件. 一.五大事件 builder.RegisterType<Person>().As<IPer ...