jquery插件——验证插件(Validate)

概述：jquery.validate.js是jquery下的一个验证插件。

官网：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

中文API：http://download.csdn.net/source/2423908

实战使用：

1.引用jquery基础包和valiedate插件包

<script src="../js/jquery/jquery.js" type="text/javascript"></script>

<script src="../js/jquery/jquery.validate.js" type="text/javascript"></script>

注：这里不能将引用写反。

2.编辑发生验证错误时提示的css

<style type="text/css">

        #frmMain label.error

        {

            color: red;

            margin-left: 10px;

            width: auto;

            display: inline;

        }

        input.error

        {

            border: 1px dotted red;

        }

</style>

注：这个可以根据具体的实现进行修改。

3.定义验证规则（本人在项目中使用的时候是定义了一个单独的js文件，比如信息添加——

Information_Create.aspx和信息的修改——Information_Edit.aspx这两个页面都需要进验证，那么我就定

义一个js文件——information.js在两个页面都可以重用。），information.js验证如下：

$.validator.setDefaults({

        submitHandler: function(form) {

         form.submit();

     }

    });

$(document).ready(function() {

 $("#frmMain").validate({    //这里的frmMain是我们的<from></form>标签的id

  rules: {

   txtName: {

   required: true

       },

       txtAuthor: {

        required: true

       },

       txtSource:{

           required: true

       },

       hidType:{

           required: true

       },

       ddlState: {

        required: true

       },

       ddlPutType:{

           required: true

       }

      },

      messages: {

       txtName: {

        required: "标题不能为空！"

       },

       txtAuthor: {

        required: "作者不能为空！"

       },

       txtSource:{

           required: "来源不能为空！"

       },

       hidType:{

           required: "请选择信息归属！"

       },

       ddlState: {

        required: "请选择信息审核状态！"

       },

       ddlPutType:{

           required: "请选择信息推荐位！"

       }

      }

        });

    });

注：这里只是举了自己在实战中的一个小例子，还有一些验证规则，大家可以通过访问官网或者下载jquery

validate 中文API进行查看使用。

温馨提示：本人这里用的是asp.net开发时使用的，如果我在我的页面上加上了一个验证后，页面上出现两个按钮，比如：保存按钮，返回按钮。如果我们不做处理的话，当单击两个按钮的时候两个按钮都会去验证，导致返回按钮不能返回。这里可以在返回按钮加上CssClass="cancel"，这样的话当我们点击返回按钮的时候就不去验证了。

比如：

<asp:Button ID="btnSave" runat="server" Text="保存" Width="85px"

                        οnclick="btnSave_Click" />

<asp:Button ID="btnBack" runat="server" Text="返回" Width="85px"

CssClass="cancel" οnclick="btnBack_Click"/>