javascript - 在 OnChange 事件上使用 javascript 验证 gridview 中的文本框(不起作用)

Question

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

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

我的文本框位于 GridView 中。 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 中执行此操作的方法。 (在给你工作代码后我会解释)

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

<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(您在控件创建或设计时定义的 ID，以及由服务器)、UniqueID(服务器使用的唯一 ID)和 ClientID(服务器将呈现给客户端的 ID。这是您需要的 ID)需要在 JavaScript 中唯一标识每一行中的元素)。

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

例如第一行的 txtScore 文本框的 ClientID 为

GVQuestion_txtScore_0 

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

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

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

学习 JavaScript 一切顺利:-)