Блог

У меня есть два TextBox поля в веб-форме, которые проверяются как даты с использованием CustomValidation элемента. Отрывок о том, как я это настроил, выглядит следующим образом (включает поля и средство проверки Javascript):

 <script type="text/javascript">
    function dateParam1(sender, args)
    {
        var dt = document.getElementById('ctl00_ContentPlaceHolder1_txt01');


        args.IsValid = dt.value.length > 0 ? (/([1-9]|0[1-9]|1[012])[- /.]([1-9]|0[1-9]|[12][0-9]|3[01])[-/.](19|20)dd/.test(dt.value) ? true : false) : true;
    }

    function dateParam2(sender, args)
    {
        var  dt = document.getElementById('ctl00_ContentPlaceHolder1_txt02');


        args.IsValid = dt.value.length > 0 ? (/([1-9]|0[1-9]|1[012])[- /.]([1-9]|0[1-9]|[12][0-9]|3[01])[-/.](19|20)dd/.test(dt.value) ? true : false) : true;
    }
</script>
<asp:Panel ID="pnl01" runat="server" Width="600px" Visible="False">
    <table>
        <tr valign="middle">
            <td width="250px" align="right">
                 <asp:Label ID="lbl01" runat="server" ></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txt01" runat="server" MaxLength="50"></asp:TextBox>
                <asp:CustomValidator ID="cvP01" runat="server" ErrorMessage="(mm/dd/yyyy)" ValidateEmptyText="True" ControlToValidate="txt01" ClientValidationFunction="dateParam1" ></asp:CustomValidator>
            </td>
            <td>
                <asp:Label ID="lbl01a" runat="server" Font-Size="X-Small" ForeColor="#000066" ></asp:Label>
            </td>
        </tr>
    </table>
</asp:Panel>
<asp:Panel ID="pnl02" runat="server" Width="600px" Visible="False">
    <table>
        <tr valign="middle">
            <td width="250px" align="right">
                <asp:Label ID="lbl02" runat="server" ></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txt02" runat="server" MaxLength="50"></asp:TextBox>
            </td>
            <td>
                <asp:Label ID="lbl02a" runat="server" Font-Size="X-Small" ForeColor="#000066" ></asp:Label>
                <asp:CustomValidator ID="cvP02" runat="server" ErrorMessage="(mm/dd/yyyy)" ValidateEmptyText="True" ControlToValidate="txt02" ClientValidationFunction="dateParam2" ></asp:CustomValidator>
            </td>
        </tr>
    </table>
</asp:Panel>
  

Как вы можете видеть, у меня есть два отдельных элемента и функции проверки для каждого текстового поля. Однако, хотя обе проверки соответствуют отдельным текстовым полям, проверка, выполняемая для них обоих, абсолютно одинакова (т. Е. Оценка того, как должны выглядеть даты и что они содержат)

Мой вопрос: есть ли способ создать единую функцию проверки, которая могла бы проверять все указанные текстовые поля как даты не только на этой странице, но и во всем приложении?

Я попытался реализовать глобальную функцию Javascript, добавив ее в главный файл. Это работает, но для этого требуется конкретный идентификатор элемента, который вы пытаетесь проверить. Можно присвоить каждому текстовому полю даты в приложении один и тот же идентификатор, но это не сработает, если у вас есть два поля даты на одной странице. Возможно ли получить значение, переданное функции через либо sender или args ?

Если это имеет какое-либо значение, мой код написан на C #.

Редактировать: я хочу посмотреть, возможно ли это, в частности, с помощью CustomValidation .Свойство ClientValidationFunction

Попробуйте ниже;

         <asp:Panel ID="pnl01" runat="server" Width="600px" Visible="true">
        <table>
            <tr valign="middle">
                <td width="250px" align="right">
                    <asp:Label ID="lbl01" runat="server" Text="Text1"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txt01" runat="server" MaxLength="50" CssClass="test"></asp:TextBox>

                </td>
                <td>
                    <asp:Label ID="lbl01a" runat="server" Font-Size="X-Small" ForeColor="#000066"></asp:Label>
                </td>
            </tr>
        </table>
    </asp:Panel>
        <asp:Panel ID="pnl02" runat="server" Width="600px" Visible="True">
        <table>
            <tr valign="middle">
                <td width="250px" align="right">
                    <asp:Label ID="lbl02" runat="server" Text="Text2"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txt02" runat="server" MaxLength="50" CssClass="test"></asp:TextBox>
                </td>
                <td>
                    <asp:Label ID="lbl02a" runat="server" Font-Size="X-Small" ForeColor="#000066"></asp:Label>
                </td>
            </tr>
        </table>
    </asp:Panel>
  

`

  <script type="text/javascript">

    $(".test").focusout(function () {
        var elem = $(this);
        var str = elem.val();
        var date_regex = /^(0[1-9]|1[0-2])/(0[1-9]|1d|2d|3[01])/(19|20)d{2}$/;
        if (date_regex.test(str))
        {
            alert('Great, you entered correct date value');
            $(this).removeClass('focus');
            elem.data('oldVal', elem.val());
        }
        else {
            
            alert('invalid value');
            $(this).addClass('focus');
       
        }
    });

    </script>  

     <style type="text/css">
        .focus
        {
            border:solid 2px;
            border-color:red;
        }
    </style>  

Я сделал

• ASP.Сетевая панель видна = true только для целей проверки.
• Добавлено свойство CssClass=»test» для текстовых полей, которые необходимо проверить
• Затем в JavaScript он проверяет событие «focusout» выбранного элемента с помощью CssClass=»test . Он получит ввод текста и проверит соответствие заданному регулярному выражению даты.
• В стилях я добавил класс с именем focus, и этот класс будет добавлен в выбранное текстовое поле с помощью CssClass=»test», и он выделит текстовое поле красным цветом, в котором неверные данные.
• Когда выбранный элемент содержит правильные данные, вновь добавленные стили будут удалены.

Настройте выходные данные в JavaScript и таблице стилей.