在 OnChange 事件上使用 javascript 验证 gridview 中的文本框（不工作）

Question

我是 javascript 的新手，我想使用 javascript 函数来验证文本框中的数据。

我有 1 个文本框 (txtScore)、1 个标签 (lblMark) 和 1 个标签 (lblValidation)。 当分数高于标记时，我希望 javascript 中的 ScoreValidation 函数触发，并在 lblValidation 中显示一条消息。

我的文本框在网格视图中。 gridview 在一个控件中，我正在处理一个 asp.net 项目。

这是我目前控制的代码：

<asp:ObjectDataSource  ID="DS" runat="server" TypeName="BLL.MAnswer" DataObjectTypeName="DTO.MAnswer" 
    SelectMethod="Select" InsertMethod="Update" UpdateMethod="Update" DeleteMethod="Update">
    <SelectParameters>
        <asp:ControlParameter Name="MAppID" ControlID="lblMAppID" Type="Int16" />
    </SelectParameters>
</asp:ObjectDataSource>

<asp:GridView ID="GVQuestion" runat="server" SkinID="QuestionGrid" DataSourceID="DS">
<Columns>

    <asp:TemplateField ItemStyle-VerticalAlign="Top">
        <ItemTemplate>
            <asp:Label ID="lblValidation" runat="server" ForeColor="Red" />
            <asp:Label ID="lblMark"  Text='<%# Eval("Mark") %>' runat="server"/>
            <asp:TextBox ID="txtScore" runat="server" Text='<%# Eval("Score") %>' OnChange="ScoreValidation()"/>
        </ItemTemplate>
    </asp:TemplateField>
</Columns>
</asp:GridView>

<script type="text/javascript">
   function ScoreValidation() {
        var Score = document.getElementById('txtScore').value;
        var Mark = document.getElementById('lblMark').value;
        var Validation = "Score cannot be higher than mark";

        if (Score > Mark) document.getElementById('lblValidation').value = "Score cannot be higher than mark";
    }

Answer 1

为时已晚，但我想我应该留言以供其他 Google 员工日后参考。

我同意 Csdtesting 的回答，这是最简单的。但是，我不同意他的观点，因为他说这不能通过 JavaScript 完成。下面介绍如何在 JavaScript 中执行此操作。客户端验证可以使用 JavaScript 完成，因为最终所有服务器控件都呈现为 HTML。甚至 RangeValidator 也使用 JavaScript 进行验证。您在正确的路径中，只是不知道如何获取每个控件的 ID。没关系，你会到达那里的:-)

以下是您在原生 JavaScript 中的操作方法。 （我给你工作代码后会解释）

您的脚本应该这样修改。请注意，您的函数现在接受一个参数。 （代码是不言自明的，我尝试在可能的情况下添加 cmets。）

<script type="text/javascript">
              /*
                obj - txtScore object
              */
              function ScoreValidation(obj) {
                  // Create all your objects based on the obj object (in this case it's the html object of txtScore text box)
                  var txtScore = document.getElementById(obj.id);
                  var lblMark = document.getElementById(obj.id.replace('txtScore', 'lblMark'));
                  var lblValidation = document.getElementById(obj.id.replace('txtScore', 'lblValidation'));

                  // Now get the values to compare
                  var Score = txtScore.value;
                  var Mark = lblMark.innerHTML; // Labels (ultimately becomes Spans doesn't have a value. therefore you need to use inner HTML)

                  // You need to convert Mark to int since you cannot compare two data types (I.e. int vs html)
                  if (Score > parseInt(Mark)) {
                      lblValidation.innerHTML = "Score cannot be higher than mark";
                      txtScore.focus(); // Don't leave the text box until user fix the validation issue
                  }
                  else {
                        // reset your validation message label if all is good
                      lblValidation.innerHTML = "";
                  }
              }
          </script>

然后在你的标记代码中而不是仅仅调用没有参数的JavaScript函数传递当前对象（即this在JavaScript中this代表当前对象）。

<asp:TextBox ID="txtScore" runat="server" Text='0' onBlur="ScoreValidation(this)"/>

请注意，我使用了onBlur 而不是OnChange 事件，因为它更适合验证。 （并且，当您编写客户端事件时，以简单的大小写而不是大写字母开头。这将服务器端事件与客户端事件区分开来。没关系，但更好:-)）

进一步说明

首先你必须明白你的服务器端控件将被转换为一个html等价物并且每个控件都有一个ID（一个你在控件创建或设计时定义的和一个由服务器使用的），@ 987654333@（服务器使用的唯一 ID）和 ClientID（服务器将呈现给客户端的 ID。这是您在 JavaScript 中唯一标识每行中的元素所需的 ID）。

其次，您必须了解在服务器端和客户端都存在对象层次结构。因此，当服务器为您的控件决定 ClientID 时，它会考虑此服务器端对象层次结构。而且，由于您的控件位于 GridView 内，因此它还将考虑行号（从 0 开始）。然后它吐出一个唯一的ID。

例如第一行 txtScore 文本框的 ClientID 将是

GVQuestion_txtScore_0 

请注意，如果您的 GridView 包含在另一个对象或 UserControl 等中，并且如果您在多个服务器上运行您的应用程序，这可能会略有不同。所以它变得复杂:-)

但是，JavaScript 消除了您的所有顾虑，并为您提供了this。这表示当前的客户端对象。

希望你能理解并学到一些东西。

在学习 JavaScript 方面一切顺利 :-)

Answer 2

我建议使用RangeValidatorcontrol。

<asp:RangeValidator id="Range1"
           ControlToValidate="TextBox1"
           MinimumValue=""
           MaximumValue="<%# Eval("Mark") %>"
           Type="Integer"
           Text="The value must be integer and greater or equal than mark"
           runat="server"/>