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