Question

我在转发器中有一个文本框。我想验证将在文本框中输入的值。我在我的文本框中使用了onchange事件（也尝试了oninput），但它不起作用。请帮我弄清楚我的代码是什么问题因为我是网络开发的新手（我刚接触到jquery，asp.net，vb.net和html）。另外，如果您可以提供一些建议，我希望创建一个将执行验证的单个函数，并将其应用于4个不同的文本框。我知道我的代码太蹩脚了。提前谢谢你。

这是我的剧本

$("#Text1").on('change input', function () {
    var qtyReqd = $(this).val();
    var qtyAvail = $("#anymfg-qtyavail").val();
    if (qtyReqd > qtyAvail) {
        alert("The required quantity cannot be more than the available quantity");
        qtyReqd = $(this).val(qtyAvail);
    }
});

$("#Text2").change(function () {
    var qtyReqd = $(this).val();
    var qtyAvail = $("#instock-qtyavail").val();
    if (qtyReqd > qtyAvail) {
        alert("The required quantity cannot be more than the available quantity");
        qtyReqd = $(this).val(qtyAvail);
    }
});

$("#Text3").change(function () {
    var qtyReqd = $(this).val();
    var qtyAvail = $("#outofstock-qtyavail").val();
    if (qtyReqd > qtyAvail) {
        alert("The required quantity cannot be more than the available quantity");
        qtyReqd = $(this).val(qtyAvail);
    }
});

$("#Text4").change(function () {
    var qtyReqd = $(this).val();
    var qtyAvail = $("#outofstockalt-qtyavail").val();
    if (qtyReqd > qtyAvail) {
        alert("The required quantity cannot be more than the available quantity");
        qtyReqd = $(this).val(qtyAvail);
    }
});

HTML代码

<div id="anymfg">
        <asp:Repeater ID="rptAnyMfg" runat="server">
            <ItemTemplate>
                <div id="anymfgrow">
                    <div class="manufacturer">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Mfg").ToString%></div>
                    </div>
                    <div id="anymfg-qtyavail" class="qty-avail">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Qty").ToString%>
                    </div>
                    <div class="qty-required">
                        <input id="Text1" type="text" onkeypress="return validate(event);" />
                    </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    <div id="in-stock">
        <asp:Repeater ID="rptInStock" runat="server">
            <ItemTemplate>
                <div class="in-stock">
                    <div class="manufacturer">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Mfg").ToString%>
                    </div>
                    <div id="instock-qtyavail" class="qty-avail">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Qty").ToString%>
                    </div>
                    <div class="qty-required">
                        <input id="Text2" type="text" onkeypress="return validate(event);"/>
                    </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    <div id="out-of-stock">
        <asp:Repeater ID="rptOutOfStock" runat="server" OnItemDataBound="rptOutOfStock_ItemDataBound">
            <ItemTemplate>
                <div ID="outofstock_row" class="out-of-stock" runat="server">
                    <div class="manufacturer">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Mfg").ToString%>
                    </div>
                    <div id="outofstock-qtyavail" class="qty-avail">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Qty").ToString%>
                    </div>
                    <div class="qty-required">
                        <input id="Text3" type="text" onkeypress="return validate(event);"/>
                    </div>
                </div>
            </ItemTemplate>
            <AlternatingItemTemplate>
                <div class="out-of-stock-alt">
                    <div class="manufacturer">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Mfg").ToString%>
                    </div>
                    <div id="outofstockalt-qtyavail" class="qty-avail">
                        <%# CType(Container.DataItem, System.Data.DataRowView).Item("Qty").ToString%>
                    </div>
                    <div class="qty-required">
                        <input id="Text4" type="text" onkeypress="return validate(event);"/>
                    </div>
                </div>
            </AlternatingItemTemplate>
        </asp:Repeater>
    </div>

我的新脚本代码:(请忽略上面的第一个我没有删除它，因为这是我的第一篇文章）。我在每个onchange事件上调用此函数，但它只在转发器的第一行工作。那是为什么？

function ValidateQty() {
    var qtyreqd = document.getElementById("Text1").value;
    var qtyavail1 = document.getElementById("anymfg-qtyavail");
    var qtyavail = qtyavail1.childNodes[0].nodeValue.trim();
    if (qtyreqd > qtyavail) {
        alert("The required quantity cannot be more than the available quantity");
        $("#Text1").val(qtyavail);
    //alert(qtyavail);
    }
}

Answer 1

您可以创建validateElement function并从您的活动中调用，这只是一个示例：

function validateElement(id, value) {
    switch (id) {
        case "name": return ((!!value) ? ("") : ("Required"));
        case "description": return ((!!value) ? ("") : ("Required"));
        case "price": {
                if (!value) {
                    return "Required";
                } else if (isNaN(value)) {
                    return "Not a number";
                } else {
                    return "";
                }
        }
        case "email": return ((!!value) ? ("") : ("Required"));
        default: return "";
    }
}

然后你可以实现blur事件，如下所示：

$(function() {
    $("#myForm").on("blur", "#name, #description, #price, #email", function() {
        alert(validateElement("Response is " + $(this).attr("id"), $(this).val()));
    });
});

现在，关于您的问题，当您向他们附加事件时，我不确定Text1，Text2，Text3和Text4是否已存在。但是，我不确定我完全明白你的意思是“它不起作用”。那太宽了。

Answer 2

这是我在转发器中的每个文本框上用于onchange事件的jquery函数。我使用（this）函数来识别当前正在更改的行，然后使用.parent（）。兄弟来跟踪我想要从中获取值的元素。我已经知道你不能比较一个数字（在字符串中）所以我需要将我得到的值转换为整数。我已经在jquery中学到了很多关于这个问题的东西。希望这也会对其他人有所帮助.. :)

function ValidateQty(txtBox) {
    var qtyreqd = parseInt(txtBox.value);
    var qtyavail = parseInt($(txtBox).parent().siblings(".qty-avail").text().trim());
    if (qtyreqd > qtyavail) {
        alert("The required quantity cannot be more than the available quantity");
        txtBox.value = qtyavail;
        txtBox.focus();
    }
}

HTML：

<input id="Text1" type="text" onkeypress="return validate(event);" onchange="ValidateQty(this);" />

jQuery onchange：验证转发器中文本框的值

2 个答案: