天天看点

在Asp.Net项目中应用Jquery.validation时遇到的一个问题

近在处理的一个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
>


      

经过分析得出原因:

经过一番折腾后,通过在页面上加入了下面的一行代码,解决问题,但对原理还不是太清楚

在Asp.Net项目中应用Jquery.validation时遇到的一个问题
<
input 
type
="hidden" 
name
="btnSubmit" 
value
=" 确定 " />
      

继续阅读