C# 如何在客户端验证自定义控件?

C# 如何在客户端验证自定义控件?,c#,asp.net,validation,client-side,C#,Asp.net,Validation,Client Side,继我的关于自定义控件和验证的讨论之后,我现在有了服务器端验证,但似乎不知道如何添加客户端验证。我必须进行以下控制: [ValidationProperty("Text")] [ToolboxData("<{0}:DateSelect runat=server></{0}:DateSelect>")] public class DateSelect : System.Web.UI.WebControls.Panel { private DropDownList day;

继我的关于自定义控件和验证的讨论之后,我现在有了服务器端验证,但似乎不知道如何添加客户端验证。我必须进行以下控制:

[ValidationProperty("Text")]
[ToolboxData("<{0}:DateSelect runat=server></{0}:DateSelect>")]
public class DateSelect : System.Web.UI.WebControls.Panel
{
 private DropDownList day;
 private DropDownList month;
 private DropDownList year;

 public DateSelect()
 {
    day = new DropDownList();
    /* some code to create items for 'day' here */
    Controls.Add(day);
    month = new DropDownList();
    /* some code to create items for 'month' here */
    Controls.Add(month);
    year = new DropDownList();
    /* some code to create items for 'year' here */
    Controls.Add(year);
 }


 public string Text
 {
    get
    {
        return year.Text + "-" + month.Text + "-" + day.Text;
    }
 }
}

因此,我相信我必须向我的自定义控件添加一些东西,可能是一段javascript,一旦验证器尝试验证我的控件并从三个DropDownLists的选定项中生成要验证的正确值,就会调用它。我只是不知道在哪里添加这个脚本。有什么指针吗?

因为您的控件实际上包含几个服务器控件,所以我建议将客户端验证器添加到控件集合中,就像处理其他控件一样

var ddl = new DropDownList();
ddl.ID = "ddlDay";
Controls.Add(ddl);

var validator = new RequiredFieldValidator();
val.ControlToValidate = ddl.ID;
val.ErrorMessage = "*"; //property to set this for all validators
val.Display = ValidatorDisplay.Dynamic; //property to set this for all validators
Controls.Add(validator);
添加验证程序后,可以公开属性以应用于控件中的所有验证程序,如验证组、错误消息、显示类型等

编辑#1

如果要将组合输入作为一个输入进行验证,请使用
CustomValidator
并通过控件注册必要的客户端脚本

我根本没有测试过这个,但下面是一个简单的代码示例来演示这个概念。显然,您可以使用
StringBuilder
或其他工具在代码中构建验证函数:

<script type="text/javascript">
    clientValidate = function(source, args){

        var ddl1 = document.getElementById("<%= ddl1.ClientID %>");
        var ddl2 = document.getElementById("<%= ddl2.ClientID %>");

        if (ddl1.options[e.selectedIndex].value.length == 0)
            args.IsValid = false;
        if (ddl2.options[e.selectedIndex].value.length == 0)
            args.IsValid = false; 

    }
</script>
<asp:CustomValidator ID="MyCustomValidator" runat="server"
    ErrorMessage="Invalid" 
    ClientValidationFunction="clientValidate" />

clientValidate=函数(源,参数){
var ddl1=document.getElementById(“”);
var ddl2=document.getElementById(“”);
if(ddl1.options[e.selectedIndex].value.length==0)
args.IsValid=false;
if(ddl2.options[e.selectedIndex].value.length==0)
args.IsValid=false;
}

  • 编辑#2


    更多的阅读表明,
    CustomValidator
    应该与您的复合控件兼容

    因为您的控件实际上包含多个服务器控件,所以我建议将客户端验证程序添加到控件集合中,就像处理其他控件一样

    var ddl = new DropDownList();
    ddl.ID = "ddlDay";
    Controls.Add(ddl);
    
    var validator = new RequiredFieldValidator();
    val.ControlToValidate = ddl.ID;
    val.ErrorMessage = "*"; //property to set this for all validators
    val.Display = ValidatorDisplay.Dynamic; //property to set this for all validators
    Controls.Add(validator);
    
    添加验证程序后,可以公开属性以应用于控件中的所有验证程序,如验证组、错误消息、显示类型等

    编辑#1

    如果要将组合输入作为一个输入进行验证,请使用
    CustomValidator
    并通过控件注册必要的客户端脚本

    我根本没有测试过这个,但下面是一个简单的代码示例来演示这个概念。显然,您可以使用
    StringBuilder
    或其他工具在代码中构建验证函数:

    <script type="text/javascript">
        clientValidate = function(source, args){
    
            var ddl1 = document.getElementById("<%= ddl1.ClientID %>");
            var ddl2 = document.getElementById("<%= ddl2.ClientID %>");
    
            if (ddl1.options[e.selectedIndex].value.length == 0)
                args.IsValid = false;
            if (ddl2.options[e.selectedIndex].value.length == 0)
                args.IsValid = false; 
    
        }
    </script>
    <asp:CustomValidator ID="MyCustomValidator" runat="server"
        ErrorMessage="Invalid" 
        ClientValidationFunction="clientValidate" />
    
    
    clientValidate=函数(源,参数){
    var ddl1=document.getElementById(“”);
    var ddl2=document.getElementById(“”);
    if(ddl1.options[e.selectedIndex].value.length==0)
    args.IsValid=false;
    if(ddl2.options[e.selectedIndex].value.length==0)
    args.IsValid=false;
    }
    
    
  • 编辑#2


    更多的阅读表明,
    CustomValidator
    应该与您的复合控件兼容

    好的,我理解你的意思,但是这如何使客户端验证器根据3个DropDownList的选择项组合作为日期进行验证呢?还请注意,在我当前的设置中,服务器端验证工作正常。如果组合输入是您要验证的内容,我将使用
    CustomValidator
    ,并让您的控件插入必要的客户端脚本来执行验证。我理解您的观点,但更愿意从另一种方式解决问题,即调整自定义控件,使CompareValidator与之配合使用。原因是所有控件和验证器都是基于数据库所需的字段和数据类型动态创建的。我认为您的解决方案是可行的,但由于CompareValidator在服务器端工作,我觉得应该可以使它在客户端也工作。我只是不知道挂接在哪里。@Bazzz:将
    ControlToValidate
    属性设置为自定义控件的ID不起作用?当你这样做的时候会发生什么?@bazz:另外,请参见我的回答中的
    Edit#2
    。我认为
    CustomValidator
    可以很好地与您的自定义控件配合使用,并且它足够灵活,可以处理任何类型的验证,即必填字段、比较、正则表达式等。好的,我理解您的意思,但这如何使客户端验证程序根据3个DropDownList的选定项组合作为日期进行验证?还请注意,在我当前的设置中,服务器端验证工作正常。如果组合输入是您要验证的内容,我将使用
    CustomValidator
    ,并让您的控件插入必要的客户端脚本来执行验证。我理解您的观点,但更愿意从另一种方式解决问题,即调整自定义控件,使CompareValidator与之配合使用。原因是所有控件和验证器都是基于数据库所需的字段和数据类型动态创建的。我认为您的解决方案是可行的,但由于CompareValidator在服务器端工作,我觉得应该可以使它在客户端也工作。我只是不知道挂接在哪里。@Bazzz:将
    ControlToValidate
    属性设置为自定义控件的ID不起作用?当你这样做的时候会发生什么?@bazz:另外,请参见我的回答中的
    Edit#2
    。我认为
    CustomValidator
    可以很好地与您的自定义控件配合使用,并且它足够灵活,可以处理任何类型的验证,如必填字段、比较、正则表达式等。