使用javascript 实现.net 验证控件功能
在我们平时经常会遇到这样的一个问题：当我们选择checkbox时，希望验证一个控件，取消选择，隐藏并取消验证这个控件。如果完全使用服务器事件来实现此功能，肯定用户体现不好，所以我们可以使用javascript 实现.net 验证控件功能。
首先我们看看.NET 中的验证控件，在页面上做了什么事情。
<asp:TextBox ID="txtValidator" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtValidator" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
在页面上解析成：
<input name="txtValidator" type="text" id="Text1" />
<span id="Span1" style="color: Red; visibility: hidden;">RequiredFieldValidator</span>
验证控件在页面变为了一个隐藏的span，需要验证的时候，进行显示。
同时页面上出现了一些用于验证的脚步
<script type="text/javascript">
//<![CDATA[
//验证控件的集合，当添加一个验证控件的时候，就会多一个item
var Page_Validators = new Array(document.getElementById("RequiredFieldValidator1"));
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var RequiredFieldValidator1 = document.all ? document.all["RequiredFieldValidator1"] : document.getElementById("RequiredFieldValidator1"); //找到验证控件
RequiredFieldValidator1.controltovalidate = "txtValidator";//绑定需要验证的控件
RequiredFieldValidator1.errormessage = "RequiredFieldValidator";//显示未验证通过的错误信息
RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";//用于验证的方法
RequiredFieldValidator1.initialvalue = "";
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}
function ValidatorOnSubmit() {
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else {
return true;
}
}
//]]>
</script>
我们通过构造类似的脚本进行控件验证
- 添加验证span
<asp:CheckBox ID="cbSelect" runat="server" Text="选择" onclick="ajusSelectValidator(this,'spantxtUserName')" />
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
<span id="spantxtUserName" style="color: Red; display: none;">*该项不能为空</span>//添加span,用于显示验证信息
- 添加脚本
<script language="javascript" type="text/javascript">
var IsSelectID = '<%=cbSelect.ClientID%>';
var txtUserName = '<%=txtUserName.ClientID%>';
function ajusSelectValidator (checkbox, validatorID) {
ajustValidator(checkbox, validatorID, txtUserName);
}
</script>
//Validator.Js
function ajustValidator(checkbox, validatorID, controltoHideID) {
if (checkbox.checked) {
register(validatorID, controltoHideID);
document.getElementById(controltoHideID).style.visibility = "visible";
}
else {
removeValidator(validatorID);
document.getElementById(controltoHideID).style.visibility = "hidden";
}
}
//添加验证关联
function register(validatorID, controltoValidateId) {
Page_Validators.push(document.getElementById(validatorID));
var span = document.getElementById(validatorID);
spanTest.controltovalidate = controltoValidateId;
span.errormessage = "*该项不能为空";
span.display = "Dynamic";
span.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
span.initialvalue = "";
// spanTest.style.visibility = "visible";
ValidatorOnLoad();
}
//取消验证关联
function removeValidator(validatorID) {
var validator = document.getElementById(validatorID);
if (validator) {
for (var i = 0; i < Page_Validators.length; i++) {
if (Page_Validators[i] == validator) {
Page_Validators.splice(i, 1);
i--;
}
}
validator.style.display = "none";
ValidatorOnLoad();
}
}
PS: 如果页面上没有验证控件的话，直接执行上面的代码会出错的，因为Page_Validators 为null，直接往里面push为抛异常。所以用的时候，要加一个验证的控件。