javascript - 单个 ASP 文本框上的 jquery 验证

Question

我的 Default.aspx 页面上有许多文本框，类似于下面的内容。

<asp:TextBox ID="myTextbox" runat="server"></asp:TextBox>

当用户单击按钮提交时，会执行以下 javascript：

            $(function () {
            $('#<%= myButton.ClientID %>').click(function (clickToExecuteMyMethod) {
                var userWantsToSubmit = window.confirm("Are you sure you want to press the button?");
                if (userWantsToSubmit) {
                    $.blockUI({ overlayCSS: { backgroundColor: '#00f' }, message: '<h1>Please wait a while...</h1>' });
                }
                if (!userWantsToSubmit) {
                    clickToExecuteMyMethod.preventDefault();
                }
            });
        });    

但是，一旦按下相同的按钮，我还想使用 jquery 来验证是否已在 myTextbox 中输入了某些内容（任何内容）。如果验证成功，那么我希望触发其他 javascript。

Answer 1

对于检查单个文本框的简单情况，只需获取文本框的值.val()

$('#<%= myButton.ClientID %>').click(function (clickToExecuteMyMethod) {
    var userWantsToSubmit = window.confirm("Are you sure you want to press the button?");

    // Check to see if the textbox is empty
    var isValid = $('#<%= myTextbox.ClientID %>').val() != "";

    if (userWantsToSubmit && isValid) {
        $.blockUI({ overlayCSS: { backgroundColor: '#00f' }, message: '<h1>Please wait a while...</h1>' });
    } else {
        clickToExecuteMyMethod.preventDefault();
    }
}); 

不过，这不会是一个非常可扩展的解决方案。我建议您看一下jquery 验证插件之类的东西，或者尝试使用谷歌搜索其他验证解决方案，周围有很多。

Answer 2

如果您使用任何 ASP.Net 页面验证控件，则只需调用客户端验证例程：

$(function () {
    $('#<%= myButton.ClientID %>').click(function (clickToExecuteMyMethod) {
        var userWantsToSubmit = window.confirm("Are you sure you want to press the button?");
        Page_ClientValidate('validationGroup'); //validate using ASP.Net validator controls.
        if (userWantsToSubmit && Page_IsValid) {
            $.blockUI({
                "overlayCSS": {
                    "backgroundColor": "#00f"
                },
                "message": "<h1>Please wait a while...</h1>"
            });
        }
        if (!userWantsToSubmit || !Page_IsValid) {
            clickToExecuteMyMethod.preventDefault();
        }
        return Page_IsValid;
    });
});