ITPub博客

首页 > Linux操作系统 > Linux操作系统 > 使用javascript 实现.net 验证控件功能

使用javascript 实现.net 验证控件功能

原创 Linux操作系统 作者:iDotNetSpace 时间:2009-08-03 14:03:57 0 删除 编辑
     在我们平时经常会遇到这样的一个问题:当我们选择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="colorRedvisibilityhidden;">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="colorReddisplaynone;">*该项不能为空span>//添加span,用于显示验证信息

  1. 添加脚本

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

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

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/12639172/viewspace-611135/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2008-01-04

  • 博文量
    2376
  • 访问量
    5298152