zoukankan      html  css  js  c++  java
  • ASP.NET 使用CustomValidator调用js函数动态修改验证TextBox的正则表达式,无刷新

    文本框输入大的内容与一个DropDownList关联。不同的输入格式需要不同的正则表达式验证。简单的办法是可以设置DropDownlist的服务器响应事件并设置DropDownlist的AutoPostBack属性,然后在服务器响应事件中修改验证控件相关属性。这个方法的明显有缺点,每次更改页面会刷新。解决办法只能通过JS。

    验证空间中的CustomValidator允许使用我们自己编写的JS(VBS)函数验证TextBox,所以这个解决起来就容易多了。代码如下:

    PS:根据MSDN的解释,JS最好放在FORM标签内。

    <asp:TemplateField HeaderText="身份证明名称" SortExpression="SFZMMC">
    
        <EditItemTemplate>
    
            <asp:DropDownList ID="DropDownListSFZMMC" runat="server" SelectedValue='<%# Bind("SFZMMC") %>'>
    
                <asp:ListItem>居民身份证</asp:ListItem>
    
                <asp:ListItem>组织机构代码</asp:ListItem>
    
            </asp:DropDownList>
    
        </EditItemTemplate>
    
        <InsertItemTemplate>
    
            <asp:DropDownList ID="DropDownListSFZMMC" runat="server" 
    
                SelectedValue='<%# Bind("SFZMMC") %>'>
    
                <asp:ListItem>居民身份证</asp:ListItem>
    
                <asp:ListItem>组织机构代码</asp:ListItem>
    
            </asp:DropDownList>
    
        </InsertItemTemplate>
    
        <ItemTemplate>
    
            <asp:Label ID="LabelSFZMMC" runat="server" Text='<%# Bind("SFZMMC") %>'></asp:Label>
    
        </ItemTemplate>
    
        <ControlStyle Width="220px" />
    
    </asp:TemplateField>
    
    <asp:TemplateField HeaderText="身份证明号码" SortExpression="SFZMHM">
    
        <EditItemTemplate>
    
            <asp:TextBox ID="TextBoxSFZMHM" runat="server" Text='<%# Bind("SFZMHM") %>'></asp:TextBox>
    
        </EditItemTemplate>
    
        <InsertItemTemplate>
    
            <asp:TextBox ID="TextBoxSFZMHM" runat="server" Text='<%# Bind("SFZMHM") %>'></asp:TextBox>
    
            <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ControlToValidate="TextBoxSFZMHM"
    
                Display="Dynamic" ErrorMessage="必须填写身份证明号码"></asp:RequiredFieldValidator>
    
                <asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="TextBoxSFZMHM" 
    
                Display="Dynamic" ClientValidationFunction="validateSFZMHM" ErrorMessage="请填写正确的身份证明号码" ></asp:CustomValidator>
    
                <script type="text/javascript" >
    
                function validateSFZMHM(source, arguments) {
    
                var ListSFZMMC= document.getElementById('DetailsView_DropDownListSFZMMC')
    
                if (ListSFZMMC.value=="居民身份证") {
    
                    var reg = new RegExp("\\d{17}[\\d|X]|\\d{15");
    
                    arguments.IsValid= (reg.test(arguments.Value));
    
                }else {
    
                    var reg = new RegExp("^[A-Za-z0-9]{8}-[A-Za-z0-9]{1}");
    
                    arguments.IsValid= (reg.test(arguments.Value));
    
                }
    
                }
    
                </script>
    
        </InsertItemTemplate>

    我原来想的办法是通过js动态修改RegularExpressionValidator来解决的,在验证阶段确实达到我的预期。可是不知道问什么使用这个办法后,无法使用进行Insert操作,DetailsView可以捕获到ItemCommand事件却不能捕获到ItemInserting事件,并且我也没有找找到原因。上面那个办法能够比较好的解决,就用什么那个办法了。

    js动态修改TextBox的RegularExpressionValidator正则表达式,无刷新(有BUG待解决)

    代码如下:

    注意:
    1)我的文本框的验证控件的客户端ID是DetailsView_RegularExpressionValidator5因为是固定的,我就没用通过ClientID的方式获取,如果想动态获取验证控件的ID,可以自己修改代码。
    2)JS代码中需要修改验证控件的innerText属性。否自验证控件本身现实的错误内容不会改变。

     

    protected void DropDownListSFZMMC_Load(object sender, EventArgs e)
    
    {
    
         DropDownList dropList=(DropDownList)sender;
    
         dropList.Attributes.Add("onchange","JavaScript:selectChange('"+dropList.ClientID+"')");
    
    }

     

    <asp:DropDownList ID="DropDownListSFZMMC" SelectedValue='<%# Bind("SFZMMC") %>'   runat="server" OnLoad="DropDownListSFZMMC_Load">
    
        <asp:ListItem>居民身份证</asp:ListItem>
    
        <asp:ListItem>组织机构代码</asp:ListItem>
    
    </asp:DropDownList>
    
    <script type="text/javascript" >
    
    function selectChange(DropDownListSFZMMC) {
    
    var DetailsView_RegularExpressionValidator5 = document.all ? document.all["DetailsView_RegularExpressionValidator5"] : document.getElementById("DetailsView_RegularExpressionValidator5");
    
    var ListSFZMMC= document.getElementById(DropDownListSFZMMC)
    
    if (ListSFZMMC.value=="居民身份证") {
    
    DetailsView_RegularExpressionValidator5.errormessage = "请填写正确的身份证号";
    
    DetailsView_RegularExpressionValidator5.innerText="请填写正确的身份证号";
    
    DetailsView_RegularExpressionValidator5.validationexpression = "\\d{17}[\\d|X]|\\d{15}";
    
    }
    
    else
    
    {
    
    DetailsView_RegularExpressionValidator5.errormessage = "请填写正确的组织机构代码";
    
    DetailsView_RegularExpressionValidator5.innerText="请填写正确的组织机构代码";
    
    DetailsView_RegularExpressionValidator5.validationexpression = "^[A-Za-z0-9]{8}-[A-Za-z0-9]{1}";
    
    }
    
    }
    
    </script>
  • 相关阅读:
    Jmeter的几种参数化方式
    selenium实现原理
    python问题
    跨域问题的解决方案
    jquery的ajax的语法
    给JavaScript 对象添加方法
    循环遍历对象的属性
    Function专题 以及js的预解析理解
    如何理解javascript中类和对象这两个概念?
    封装原生ajax
  • 原文地址:https://www.cnblogs.com/edzjx/p/2092233.html
Copyright © 2011-2022 走看看