近在处理的一个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 =" 确定 " />