最近在处理的一个asp.net项目中应用了jquery.validation来进行客户端的验证，感觉挺好的。不过在使用中遇到了一个问题，就是在应用了jquery.validation后导致asp.net的按钮无法触发事件，页面代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ChangePassword.aspx.cs" Inherits="Individuation_ChangePassword" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>密码修改</title> <script type="text/javascript" src="../JS/jquery.js"></script> <script type="text/javascript" src="../JS/jquery.validate.pack.js"></script> <script type="text/javascript" src="../JS/cmxforms.js"></script> <link href="../CSS/screen.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $.validator.setDefaults({ submitHandler: function(form) { form.submit(); } }); $().ready(function() { // validate signup form on keyup and submit $("#form1").validate({ rules: { txtOldPassword: "required", txtNewPassword: "required", txtConfirmPassword: "required", txtOldPassword: { required: true }, txtNewPassword: { required: true, minlength: 3 }, txtConfirmPassword: { required: true, minlength: 3, equalTo: "#txtNewPassword" } }, messages: { txtOldPassword: { required: "请输入原密码！" }, txtNewPassword: { required: "请输入新密码！", minlength: "新密码长度不能小于为3位！" }, txtConfirmPassword: { required: "请确认新密码！", minlength: "新密码长度不能小于为3位！", equalTo: "两次输入的密码不一致！" } } }); }); </script> <style type="text/css"> </style> </head> <body> <div id="main"> <form class="cmxform" id="form1" runat="server" > <fieldset> <legend>密码修改</legend> <p> <label for="txtOldPassword">原密码</label> <asp:TextBox ID="txtOldPassword" runat="server" MaxLength="15" TextMode="Password"></asp:TextBox> </p> <p> <label for="txtNewPassword">输入新密码</label> <asp:TextBox ID="txtNewPassword" runat="server" MaxLength="15" TextMode="Password" ></asp:TextBox> </p> <p> <label for="txtConfirmPassword">确认新密码</label> <asp:TextBox ID="txtConfirmPassword" runat="server" MaxLength="15" TextMode="Password" ></asp:TextBox> </p> <p> <asp:Button ID="btnSubmit" class="btn3_mouseout" onmouseover="this.className='btn3_mouseover'" onmouseout="this.className='btn3_mouseout'" onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" title="提交" runat="server" Text="提交" onclick="btnSubmit_Click" /> <input type="button" id="btnCancel" value="取消" class="btn3_mouseout" onmouseover="this.className='btn3_mouseover'" onmouseout="this.className='btn3_mouseout'" onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" /> </p> </fieldset> </form> </div> </body> </html>
经过分析得出原因：
经过一番折腾后，通过在页面上加入了下面的一行代码，解决问题，但对原理还不是太清楚
<input type="hidden" name="btnSubmit" value=" 确定 " />