不正入力検証 - イベントによる検証 -

不正な文字や範囲外値の入力が行われると、クライアント側でイベントが発生します。ここでは入力不可能な文字種が入力されると入力中にメッセージボックスが表示されます。また、範囲外の値や「2015/01/__」など日付や時刻として無効な値の入力が行われるとコントロールからフォーカスが移動したときにメッセージボックスでエラーが通知されます。

テキスト: (全角ひらがな10文字が入力可能です。)
マスク: (半角数字での電話番号が入力可能です。)
日付: (今日から1カ月以内の日付が入力可能です。)
時刻: (10時~12時の時刻が入力可能です。)
数値: (-50~50の数値が入力可能です。)

ソースコード

別ウィンドウで表示
using System;

public partial class Validate_ClientValidate : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
            GcDate1.MinValue = DateTime.Today;
            GcDate1.MaxValue = DateTime.Today.AddMonths(1);
            GcDate1.Value = DateTime.Today;
        }
    }
}

Partial Class Validate_ClientValidate
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            GcDate1.MinValue = DateTime.Today
            GcDate1.MaxValue = DateTime.Today.AddMonths(1)
            GcDate1.Value = DateTime.Today
        End If
    End Sub
End Class

<%@ page title="" language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true" inherits="Validate_ClientValidate, App_Web_3eyaselj" stylesheettheme="SkinFile" %>

<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMEdit" tagprefix="im_edit" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMExtenders" tagprefix="im_extenders" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMMask" tagprefix="im_mask" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMDate" tagprefix="im_date" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMNumber" tagprefix="im_number" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">

        function GcTextBox1_InvalidInput(sender, eArgs) {
            alert("全角ひらがなを10文字以内で入力してください。");
        }

        function GcMask1_InvalidInput(sender, eArgs) {
            alert("不正な文字または最大文字数を超えた入力です。");
        }

        function GcDate1_InvalidInput(sender, eArgs) {
            alert("不正な文字の入力です。半角数字で入力してください。");
        }

        function GcDate1_InvalidValue(sender, eArgs) {
            alert("日付として無効な入力です。");
        }

        function GcDate1_InvalidRange(sender, eArgs) {
            alert("今日から1カ月以内の日付を入力してください。");
        }

        function GcTime1_InvalidInput(sender, eArgs) {
            alert("不正な文字の入力です。半角数字で入力してください。");
        }

        function GcTime1_InvalidRange(sender, eArgs) {
            alert("10:00から12:00の間の時刻を入力してください。");
        }

        function GcTime1_InvalidValue(sender, eArgs) {
            alert("時刻として無効な入力です。");
        }

        function GcNumber1_InvalidInput(sender, eArgs) {
            alert("不正な文字の入力です。半角数字で入力してください。");
        }

        function GcNumber1_InvalidRange(sender, eArgs) {
            alert("-50以上50以下の数字を入力してください。");
        }

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <table align="center">
    <tr>
        <td class="controlsTd">テキスト:</td>
        <td>
            <im_edit:GcTextBox ID="GcTextBox1" runat="server" HasLoadFromXml="True" 
                Format="G" MaxLength="10" Width="200px"><clientevents invalidinput="GcTextBox1_InvalidInput"></clientevents>
            </im_edit:GcTextBox>
        </td>
        <td class="controlsTd">(全角ひらがな10文字が入力可能です。)</td>
    </tr>
    <tr>
        <td class="controlsTd">マスク:</td>
        <td>
            <im_mask:GcMask ID="GcMask1" runat="server" HasLoadFromXml="True" Width="200px"><Format Pattern="℡ \D{2,4}-\D{2,4}-\D{4}" /><clientevents invalidinput="GcMask1_InvalidInput"></clientevents>
            </im_mask:GcMask>
        </td>
        <td class="controlsTd">(半角数字での電話番号が入力可能です。)</td>
    </tr>
    <tr>
        <td class="controlsTd">日付:</td>
        <td>
            <im_date:GcDate ID="GcDate1" runat="server" HasLoadFromXml="True" Width="200px"><helpvalue ></helpvalue>
                <clientevents invalidinput="GcDate1_InvalidInput" invalidvalue="GcDate1_InvalidValue" 
                invalidrange="GcDate1_InvalidRange"></clientevents>
            </im_date:GcDate>
        </td>
        <td class="controlsTd">(今日から1カ月以内の日付が入力可能です。)</td>
    </tr>
    <tr>
        <td class="controlsTd">時刻:</td>
        <td>
            <im_date:GcTime ID="GcTime1" runat="server" HasLoadFromXml="True" 
                MaxValue="12:00:00" MinValue="10:00:00" Width="200px"><helpvalue value = "1900/01/01 10:00:00" ></helpvalue>
                <clientevents invalidinput="GcTime1_InvalidInput" invalidrange="GcTime1_InvalidRange" 
                invalidvalue="GcTime1_InvalidValue"></clientevents>
                <Spin Visible="True" />
            <DropDown Visible="False"/></im_date:GcTime>
        </td>
        <td class="controlsTd">(10時~12時の時刻が入力可能です。)</td>
    </tr>
    <tr>
        <td class="controlsTd">数値:</td>
        <td>
            <im_number:GcNumber ID="GcNumber1" runat="server" HasLoadFromXml="True" 
                MaxValue="50" MinValue="-50" Width="200px"><clientevents invalidinput="GcNumber1_InvalidInput" 
                invalidrange="GcNumber1_InvalidRange"></clientevents>
                <DropDown DropDownType="NumericPad" />
                <helpvalue value = "0" ></helpvalue>
            </im_number:GcNumber>
        </td>
        <td class="controlsTd">(-50~50の数値が入力可能です。)</td>
    </tr>
    </table>
</asp:Content>


このページの先頭へ戻る