![](/img/trans.png)
[英]ASP.NET textbox losing value after postback when value is changed client-side via javascript
[英]ASP.NET Client-side validation on textbox without postback
我正在使用ASP.NET,并希望在客户端执行以下操作,因为我不希望页面重新加载(不想要回发)。 我想检查以下条件的用户输入:
我注意到我的按钮位于<asp:button>
而不是<input type="submit>
因此它会运行我的代码以便在服务器上进行验证。如果我错了,请纠正我。那么如何创建我的<asp:button>
验证用户输入而不必传递给服务器?
你可以试试:
<asp:button onClientClick="return validateData();">
在JavaScript中它应该是:
function validateData() {
if (OK) {
return true;
} else {
return false;
}
}
return true
将使您的页面回发到服务器, return false
将阻止您的页面执行此操作。 希望这可以帮助。
处理验证,我会使用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/
你应该使用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>
在按钮控件中,只需添加以下代码段:
OnClientClick="if(Page_ClientValidate(ValidateSomething)){this.disabled=true;}"
是否将验证组添加到验证器以及尝试用作检查验证的触发器的按钮?
一旦掌握了它们,验证组就非常容易使用。 我不会深入了解有关验证器的太多细节,但如果信息有用,我可以随时将其添加到帖子中。 希望你已经解决了你的答案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.