IMZRH的日志

努力成为一个有用的人

导航

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

Posted on 2009-01-02 15:45  张荣华  阅读(3140)  评论(9)  编辑  收藏  举报

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


经过分析得出原因：
经过一番折腾后，通过在页面上加入了下面的一行代码，解决问题，但对原理还不是太清楚I dont know

<input type="hidden" name="btnSubmit" value=" 确定 " />