写在前面：

　　在做一些添加功能的时候，表单的提交前的验证是必不可少的，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. 聊聊、SpringBoot 上传文件大小

    #2.0#spring.servlet.multipart.max-file-size=10Mb#spring.servlet.multipart.max-request-size=10Mb #1.3 ...

  2. HDU 4455 Substrings ( DP好题 )

    这个……真心看不出来是个DP,我在树状数组的康庄大道上欢快的奔跑了一下午……看了题解才发现错的有多离谱. 参考:http://www.cnblogs.com/kuangbin/archive/2012 ...

  3. HDU 4031 Attack （线段树）

    成功袭击次数=所有袭击次数-成功防守次数 需要一个辅助pre来记录上一次袭击成功什么时候,对于每个查询,从上一次袭击成功开始,每隔t更新一次. 感觉这样做最坏时间复杂度是O(n^2),这里 说是O(q ...

  4. kafka+windows+java+springboot中的配置

    1.百度kafka+zookeeper+windows配置 1.1  zookeeper配置 dataDir=/tmp/zookeeper # the port at which the client ...

  5. AJAX提交表单后要清空，否则再次提交原来的数据会认为重复提交，提交失败。使用ajaxSubmit 函数需要引入jquery.form.min.js 文件

    <script src="../../Scripts/js/jquery.form.min.js" type="text/javascript">& ...

  6. 前端构建工具gulpjs的使用介绍及技巧 （转）

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

  7. js判断中出现两个！！是什么意思？

    在js中看源码时有时候出现两个!!,我起初以为是js的其他语法,其实!!就是两次取“非”的运算. 下面证明我的说法. alert(null);//false alert(!null);//true a ...

  8. freemarker 前端 判读 遍历 取值

    <#if content?length gt 100> ${content[0..100]}... <#else> ${content} </#if> freema ...

  9. poj 3729 Facer’s string

    Facer’s string Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 2155   Accepted: 644 Des ...

  10. C语言fopen函数了解

    fopen()函数功能:open a file. 原型:FILE * fopen(const char * path,const char * mode); 需要#include<stdio.h ...