关于 submit 按钮的 onclick 验证事件，第一次验证失败，第二次 submit 按钮失效的原因解析

今天在做一个生成订单的简单验证页面

主要功能：实现点击提交按钮后，先在页面上用JavaScript验证信息是否输入完全，不完全不允许提交，待输入完全后，才可以提交

页面：如下页面，可以看到，当文本框有未填值的项，点击底部“去结算”按钮，文本框后面的图片会显示，提示有错，并且“去结算”按钮旁边也显示一段文字，提示有内容没有填写，不难看出，红叉图片和提示文字是同时存在的

但是这张图片里就出现了问题，明明填写了内容，并且红叉图片也没有了，但是底部提示文字还在，因为第一次点击“去结算”按钮，故意验证失败，再次点击“去结算”按钮，就出现了问题，如果是第一次点击“去结算”按钮，就直接验证成功，那么也不会出现这个问题

代码：

<%@ Page Title="" Language="C#" MasterPageFile="~/Cart.Master" AutoEventWireup="true" CodeBehind="OrderConfirm.aspx.cs" Inherits="Web.OrderConfirm" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="JS/jquery-1.4.2.js"></script>
    <style type="text/css">
        ul {
            margin-left: 100px;
            list-style-type: none;
            margin-bottom: 0px;
        }

            ul li {
                margin-bottom: 6px;
            }

            ul input {
                 300px;
            }

        #orders td {
            border: 2px solid #cbcbcb;
        }
    </style>
    <script type="text/javascript">
        //验证数据是否有效的方法
        var isValidate = true;  //定义一个全局变量，表示数据验证是否成功，默认为true
        function Validate()
        {
            //关键步骤，因为如果第一次验证失败，isValidate已经被赋值为false
　　　　　　　　//这里如果不修改为true，那么OnSubmit方法里调用这个变量的话就一直是false，会导致验证不成功
　　　　　　　isValidate = true;  //获得所有class=txtText的input
            $(".txtText").each(function () {
                if ($(this).val() == "") {
                    //如果这个input的value为空，则显示其后面的图片
                    $(this).next().attr("style", "display:inline");
                    isValidate = false;
                }
                else {
                    //如果这个input的value不为空，则隐藏其后面的图片
                    $(this).next().attr("style", "display:none");
                }
                
            });
        }

        function OnSubmit()
        {
            Validate();
            if (isValidate == false) {
                $("#txtMsg").text("请检查收货信息是否填写完整！");
                return false;
            }
        }

    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <table style=" 80%; margin: 0px auto; border: 5px solid #64ccfa; border-collapse: collapse;">
        <tr>
            <td style="height: 20px; background-color: #64ccfa;">
                <p style="font-weight: bold; margin-left: 20px;">填写收货信息并确认订单</p>
            </td>
        </tr>
        <tr>
            <!--收货人信息：四个文本框，以及表示内容是否有效的图片-->
            <td style="border-bottom: 2px dotted gray; padding-bottom: 10px;">
                <p style="font-weight: bold; margin-left: 25px; margin-top: 5px;">收货人信息：</p>
                <ul>
                    <li>姓名：<input type="text" class="txtText" name="txtName" value="<%=currUser.Name %>" /><img src="Images/cha.ico" style="display:none;" width="15" height="15" /></li>
                    <li>地址：<input type="text" class="txtText" name="txtAddress" value="<%=currUser.Address %>" /><img src="Images/cha.ico" style="display:none;" width="15" height:"15" /></li>
                    <li>电话：<input type="text" class="txtText" name="txtPhone" value="<%=currUser.Phone %>" /><img src="Images/cha.ico" style="display:none;" width="15" height:"15" /></li>
                    <li>邮编：<input type="text" class="txtText" name="txtCode" /><img src="Images/cha.ico" style="display:none;" width="15" height:"15" /></li>
                </ul>
            </td>
        </tr>
        <tr>
            <!--请选择支付方式：支付宝和在线支付两种-->
            <td style="border-bottom: 2px dotted gray; padding-bottom: 10px;">
                <p style="font-weight: bold; margin-left: 20px; margin-top: 5px;">请选择支付方式：</p>
                <span style="margin-left: 25px; height: 10px;">支付方式：</span>
                <img src="Images/y_zfb.gif" alt="支付宝" style="vertical-align: middle;" />
                <input type="radio" name="payWay" value="支付宝" checked="checked" />
                <img src="Images/unionpay.gif" alt="在线支付" style="vertical-align: middle; margin-left: 50px;" />
                <input type="radio" name="payWay" value="在线支付" />
            </td>
        </tr>
        <tr>
            <!--用 Repeater 控件，绑定数据-->
            <td style="padding-bottom: 15px;">
                <p style="font-weight: bold; margin-left: 20px; margin-top: 5px;">商品清单：</p>
                <!--订单内容-->
                <div id="orders">
                    <table style=" 95%; margin: 0px auto; border-collapse: collapse; border: 2px solid #cbcbcb; text-align: center;">
                        <asp:Repeater ID="rpsCart" runat="server">
                            <HeaderTemplate>
                                <tr style="font-weight: bold; background-color: #64ccfa;">
                                    <td style=" 20%;">图书编号</td>
                                    <td style=" 50%;">商品名称</td>
                                    <td style=" 15%;">单价</td>
                                    <td style=" 15%;">数量</td>
                                </tr>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <tr class="orderList">
                                    <td><%#Eval("Book.Id") %></td>
                                    <td style="text-align: left;"><a href="BookDetail.aspx?<%#Eval("Book.Id") %>"><%#Eval("Book.Title") %></a></td>
                                    <td style="color: red; font-weight: bold;"><span id="unitPrice"><%#Eval("Book.UnitPrice","{0:0.00}") %></span></td>
                                    <td><span id="count"><%#Eval("Count") %></span></td>
                                </tr>
                            </ItemTemplate>
                        </asp:Repeater>
                    </table>
                </div>
                <!--显示总价格，提示消息，以及提交按钮-->
                <div style="text-align: right;">
                    <span style="font-weight: bold;">你需要支付的总金额为：<span style="color: red; font-weight: bold;">￥</span></span><span style="color: red; font-weight: bold; margin-right: 25px;" id="totalPrice"><%=totalPrice %></span><br />
                    <span id="txtMsg" style="color:red;font-weight:bold;"></span>
                    <input type="submit" style="background-image: url(Images/gopay.jpg);  94px; height: 32px; margin-right: 30px; margin-top: 10px;" value="" name="btnGoPay" onclick="return OnSubmit()" />
                </div>
            </td>
        </tr>
    </table>
</asp:Content>            

关键：1，在type=“submit” 的按钮，的时候，设置 onclick=“return OnSubmit()”

　　　　因为要先验证数据，在OnSubmit()方法里，调用验证数据的方法 Validate() ,验证不成功，返回false

　　2，在Validate()方法里，对全局变量 isValidate 要进行付初始值 true

　　　　因为第一次验证失败，会给 isValidate 赋值为false，如果在 Validate() 方法里不给其赋值为 true ，那么，之后再次验证，尽管验证成功，isValidate 的值还是 false，　　　　而在OnSubmit()方法里是通过判断全局变量 isValidate 的值来判断是否验证成功，那么就会导致 OnSubmit() 方法判断的值一直是false，一直不成功，导致图片2的错　　　　误

心得：这是个细节问题，有的时候考虑不全面，就很容易导致这种问题，需要代码一行行的调试，才发现，原来是错在自己不细心---出错的永远是人