使用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為拋異常。所以用的時候，要加一個驗證的控制項。