写在前面：

　　在做一些添加功能的时候，表单的提交前的验证是必不可少的，jquery的validate插件就还可以，对于基本的需求已经够了。这里记录下基本的用法。

　　还是写个简单的demo吧

<html>

  <head>

    <meta name="viewport" content="width=device-width" />

    <title>Jquery表单校验插件validate</title>

    <%--jqury插件--%>

    <script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>

    <%--validate插件--%>

    <script src="${baseURL}/ligerui/jquery-validation/jquery.validate.min.js"></script>

    <%--中文提示插件--%>

    <script src="${baseURL}/ligerui/jquery-validation/messages_cn.js" type="text/javascript"></script>

  </head>

  <body>

  <div >

    <form id="myform">

      <table>

        <tr>

          <td>

           ID

          </td>

          <td>

            <input type="text"  id="input_id" name="perCode" style="border:0.5px solid #fac090"/>

          </td>

        </tr>

        <tr>

          <td>

           Name

          </td>

          <td>

            <input type="text"  id="input_name" name="perName" style="border:0.5px solid #fac090"/>

          </td>

        </tr>

        <tr>

          <td>

            Role

          </td>

          <td>

            <select id="sel_role" name="role"  data-width="150px" style="">

              <option>工程师</option>

              <option>PM</option>

            </select>

          </td>

        </tr>

        <tr>

          <td>性别</td>

          <td style="text-align: center"><input type="radio" name="sex" value="1" checked/>男 &nbsp&nbsp&nbsp<input type="radio" name="sex" value="0"/>女</td>

        </tr>

        <tr>

          <td>爱好</td>

          <td>

            <input type="checkbox" name="favorite" value="1" /> &nbsp;赚钱 &nbsp;&nbsp;

            <input type="checkbox" name="favorite" value="2"/> &nbsp;唱歌

            <input type="checkbox" name="favorite" value="3"/> &nbsp;游戏

          </td>

        </tr>

        <tr>

          <td>

            <input id="btn_commit" type="button" value="提交"/>

          </td>

        </tr>

      </table>

    </form>

  </div>

  </body>

<script>

    $(function(){

        //表单验证

        $("#btn_commit").click(function(){

            var myflag = $("#myform").validate({

                //onfocusout:true,// 是否在获取焦点时验证

                rules:{

                    //字段的name属性:"校验器"

                    perCode:"required",//required在此含义是必填

                    //字段的name属性:{校验器:值,校验器:值}

                    perName:"required",

                    role : "required",

                    sex:"required",

                    favorite:"required",

                },

                messages: { //自定义错误信息，

                    perName: {

                        required: "用户名必填"

                    }

                },

                errorPlacement: function(error, element) { //指定错误信息位置

                    if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox

                        var eid = element.attr('name'); //获取元素的name属性

                        error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面

                    } else {

                        error.insertAfter(element);

                    }

                    //错误信息提示颜色

                    error.css("color","red");

                },

            });

            if(!(myflag.form())){

                //表单校验不通过

                return ;

            }

            //表单校验通过 提交表单

            $.ajax(

                {

                    //...

                }

            );

        });

    });

</script>

</html>

　　jquery表单的验证还是比较简单的，这里的用法也只是简单的写了个demo，如果要验证radio与checkbox的时候，最好指定下错误信息出现的位置，比较好看点

　　主要的步骤：

　　1.导入jquery插件以及validate的相关插件

　　2.调用validate()方法，在里面编写对应的需要校验的字段，以及校验规则

　　其实网上的demo例子很多，也比我这个解释详细的多，这里只是简单的记录下，对于复杂的校验规则我这里也没有写出来，之后可以查阅相关的资料即可。

　　

demo效果图：

Jquery表单验证插件validate的更多相关文章

  1. jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址

     一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...

  2. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

  3. 【jQuery基础学习】06 jQuery表单验证插件-Validation

    jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...

  4. 表单验证插件——validate

    表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options ...

  5. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  6. 【jquery】Validform，一款不错的 jquery 表单验证插件

    关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...

  7. 轻量级实用JQuery表单验证插件：validateForm5

    表单验证是Web项目一个必不可少的环节,而且是一项重复的劳动,于是小菜封装了一款简单的表单验证插件,名字叫:validateForm5. validateForm5插件基于Jquery,并向HTML5 ...

  8. (转)强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(J ...

  9. 强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...

随机推荐

  1. 【转载】Unity3d UnityEditor编辑器定制和开发插件

    在阅读本教程之前,你需要对Unity的操作流程有一些基础的认识,并且最好了解内置的GUI系统如何使用. 如何让编辑器运行你的代码 Unity3D可以通过事件触发来执行你的编辑器代码,但是我们需要一些编 ...

  2. Linq语法和C#6.0

    一. linq 1.简介: 能用linq实现的基本都可以用扩展方法实现: 举例: 查询ID>1的狗有如下两种写法 (1)var  r1=dogs.where(d=>d.id>1) ( ...

  3. （原)UE4 制作执行队列（Action Queue)

    队列和树在游戏开发中是比较常见的数据结构,在一定范围能保证执行的顺序. 结合一些设计模式技巧,往往可以做一些神器.     如加载块chunk管理,任务系统(当然也可以使用行为树来做复杂的任务系统). ...

  4. Codeforces 1088E 树形dp+思维

    比赛的时候看到题意没多想就放弃了.结果最后D也没做出来,还掉分了,所以还是题目做的太少,人太菜. 回到正题: 题意:一棵树,点带权值,然后求k个子连通块,使得k个连通块内所有的点权值相加作为分子除以k ...

  5. 深入理解css之absolute

    在慕课网上看到的张鑫旭大神的视频,做的笔记,以便日后翻看. 绝对定位与float 1.绝对定位和float有一样的特性,都有包裹性,和破坏性. 2.absolute和relative 如果不把他们俩放 ...

  6. 当发送ICMP包的时候不一定能收得到（arp已经应答了）【复现不了了】

    arp已经应答了,然后再返回ICMP应答的时候竟然不被回复. 其实这里想想也很容易想清楚: 虽然arp给了回复,但是真正到ICMP报文到的时候,我理解报文到的时候,我理解还是要进行与本地网络兑换的,本 ...

  7. P4712 「生物」能量流动

    由于题面$markdown$格式,博主太懒不想一个一个改,所以题面见此:戳 Solution: 本题的贪心思路比较有意思,完全考读题... 首先,因为总的能量来源是$a[0]$,所以可以理解为总能量守 ...

  8. LeetCode -- Implement Stacks using Queue

    Question: Implement the following operations of a queue using stacks. push(x) -- Push element x to t ...

  9. Hacking Tools

    Hacking Tools 种各样的黑客工具浩如天上繁星,这也让许多刚刚入门安全技术圈的童鞋感到眼花缭乱,本文整理了常用的安全技术工具,希望能够给你带来帮助.以下大部分工具可以在 GitHub 或 S ...

  10. Hadoop入门(五) Hadoop2.7.5集群分布式环境搭建

    本文接上文内容继续: server01 192.168.8.118 jdk.www.fengshen157.com/ hadoop NameNode.DFSZKFailoverController(z ...