使用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;">RequiredFieldValidatorspan>

驗證控制元件在頁面變為了一個隱藏的span，需要驗證的時候，進行顯示。

同時頁面上出現了一些用於驗證的腳步

//

//驗證控制元件的集合，當新增一個驗證控制元件的時候，就會多一個item

var Page_Validators = new Array(document.getElementById("RequiredFieldValidator1"));

//]]>

//

var RequiredFieldValidator1 = document.all ? document.all["RequiredFieldValidator1"] : document.getElementById("RequiredFieldValidator1"); //找到驗證控制元件

RequiredFieldValidator1.controltovalidate = "txtValidator";//繫結需要驗證的控制元件

RequiredFieldValidator1.errormessage = "RequiredFieldValidator";//顯示未驗證通過的錯誤資訊

RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";//用於驗證的方法

RequiredFieldValidator1.initialvalue = "";

//]]>

//

var Page_ValidationActive = false;

if (typeof(ValidatorOnLoad) == "function") {

    ValidatorOnLoad();

}

function ValidatorOnSubmit() {

    if (Page_ValidationActive) {

        return ValidatorCommonOnSubmit();

    }

    else {

        return true;

    }

}

        //]]>

我們通過構造類似的指令碼進行控制元件驗證

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 = '';

    var txtUserName = '';

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

原文地址：http://www.cnblogs.com/stormlly/archive/2009/08/02/1536903.html