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

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

 

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

 

中文API：http://download.youkuaiyun.com/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"/>