使用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>

我们通过构造类似的脚本进行控件验证

1. 添加验证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,用于显示验证信息

2. 添加脚本

<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为抛异常。所以用的时候，要加一个验证的控件。