没有回发的文本框上的ASP.NET客户端验证

时间:2013-07-23 02:05:35

标签: javascript asp.net

我正在使用ASP.NET,并希望在客户端执行以下操作,因为我不希望页面重新加载(不想要回发)。我想在以下条件下检查用户输入:

  1. 有2个radiobuttons和2个文本框和1个按钮。像这样的东西: enter image description here
  2. 用户必须勾选单选按钮以激活文本框(默认情况下禁用文本框)
  3. 如果用户勾选单选按钮1,将激活textbox1并且textbox2将为空并禁用,如果用户按下按钮且textbox1为空,则message1将激活。
  4. 同样适用于第二个radiobutton和textbox2。
  5. 修改

    我注意到我的按钮位于<asp:button>而不是<input type="submit>,因此它会将我的代码运行到服务器的valdiate。如果我错了,请纠正我。那么如何让<asp:button>验证用户输入而不必传递给服务器呢?

5 个答案:

答案 0 :(得分:18)

您可以尝试:

<asp:button onClientClick="return validateData();">

在JavaScript中它应该是:

function validateData() {
    if (OK) {
        return true;
    } else {
        return false;
    }
}

return true会将您的网页发回服务器,return false会阻止您的网页执行此操作。希望这会有所帮助。

答案 1 :(得分:6)

处理验证,我会使用ASP.net自定义验证器并使用jquery来辅助客户端验证:

ASP.net aspx

<form id="form1" runat="server">
    <div>
        <div id="requiedCheck1" class="check">
           <asp:RadioButton ID="radio1" runat="server" GroupName="myGroup" />
           <asp:TextBox ID="text1" runat="server" Disabled="true"></asp:TextBox>
           <asp:CustomValidator
               ID="val1" runat="server" ErrorMessage="Please Enter Text" ClientValidationFunction="ValidateSomething" ControlToValidate="text1" ValidateEmptyText="true" ></asp:CustomValidator>
        </div>
        <div id="requiedCheck2" class="check">
           <asp:RadioButton ID="radio2" runat="server" GroupName="myGroup" />
           <asp:TextBox ID="text2" runat="server" Disabled="true"></asp:TextBox>
           <asp:CustomValidator
               ID="CustomValidator1" runat="server" ErrorMessage="Please Enter Text" ClientValidationFunction="ValidateSomething" ControlToValidate="text2" ValidateEmptyText="true"></asp:CustomValidator>
        </div>
        <asp:button ID="Button1" runat="server" text="Button" />

    </div>
</form>

请注意,我已将ValidateEmptyText设置为true

js验证功能

function ValidateSomething(sender, args) {

        args.IsValid = false;
        var parentDiv = $(sender).parent(".check");

        var radioChecked = $(parentDiv).find("input:radio").is(":checked");
        var hasText = $(parentDiv).find("input:text").val().length > 0;



        if (radioChecked) {
            args.IsValid = hasText;
        } else {
            args.IsValid = true;
        }

    }

我也会添加服务器端验证方法。

如果你想真正想要你也应该能够连接单选按钮。这将在检查无线电按钮时触发验证

$(document).ready(function () {

    //Wire up the radio buttons to trigger validation this is optional
    $(".check input:radio").each(function () {
        ValidatorHookupControlID($(this).attr('id'), document.getElementById("<%= val1.ClientID %>"));
        ValidatorHookupControlID($(this).attr('id'), document.getElementById("<%= val2.ClientID %>"));
    }); 

    //jquery to change the disabled state
    $(".check :radio").click(function(){
        var parDiv = $(this).parent(".check"); //get parent div
        //empty text and set all to disabled
        $(".check input:text").val("").prop("disabled", true);

        //set target to enabled
        $(parDiv).find("input:text").prop("disabled", false);
     });           
});

我添加了jQuery javascript来切换文本框的禁用状态。您可以在此处查看切换操作:http://jsfiddle.net/cVACb/

答案 2 :(得分:0)

你应该为你的目的使用jquery:

<script>
    $(document).ready(function () {
        var Error = false;
        $("#RadioButton1").click(function () {
            $("#TextBox2").attr("disabled", "disabled");
            $("#TextBox1").removeAttr("disabled");
        });
        $("#RadioButton2").click(function () {
            $("#TextBox1").attr("disabled", "disabled");
            $("#TextBox2").removeAttr("disabled");
        });
        $("#Button1").click(function () {
            var TextBox1value = $("#TextBox1").val();
            var TextBox2value = $("#TextBox2").val();
            var TextBox1Disable = $("#TextBox1").attr("disabled");
            var TextBox2Disable = $("#TextBox2").attr("disabled");

            if ((TextBox1value == "") && TextBox1Disable != "disabled") {
                $("#Label1").text("text can not be empty");
                Error = true;
            }
            if ((TextBox2value == "") && TextBox2Disable != "disabled") {
                $("#Label2").text("text can not be empty");
                Error = true;
            }

        });


        $("#form1").submit(function (e) {
            if (Error) {
                alert("there are Some validation error in your page...!");
                e.preventDefault();
            }

        });

    });
</script>

身体元素是:

<form id="form1" runat="server">
    <div>
    </div>
    <asp:RadioButton ID="RadioButton1" runat="server" GroupName="g1" /><asp:TextBox ID="TextBox1" runat="server" Enabled="False"></asp:TextBox><asp:Label ID="Label1" runat="server" ForeColor="Red"></asp:Label>
    <br />
    <asp:RadioButton ID="RadioButton2" runat="server" GroupName="g1" /><asp:TextBox ID="TextBox2" runat="server" Enabled="False"></asp:TextBox><asp:Label ID="Label2" runat="server" ForeColor="Red"></asp:Label>
    <br />
    <asp:Button ID="Button1" runat="server" Text="Button" />
</form>

答案 3 :(得分:0)

在按钮控件中,只需添加以下代码段:

OnClientClick="if(Page_ClientValidate(ValidateSomething)){this.disabled=true;}"

点击此链接asp.net Disable Button after Click while maintaining CausesValidation and an OnClick-Method

答案 4 :(得分:0)

是否会向验证程序添加验证组以及尝试用作检查验证的触发器的按钮?

验证组一旦掌握它们就非常容易使用。我不会深入了解有关验证器的太多细节,但如果信息有用,我可以随时将其添加到帖子中。希望你已经解决了你的答案。