控えめな検証

Inputコントロールは、控えめな検証をサポートしており、クライアント側検証によってC1入力コントロールを検証することができます。控えめな検証は、大量の検証コードを書かずにシンプルなクライアント側検証を実装し、正しい属性を追加してスクリプトファイルをインクルードするだけで、ユーザーエクスペリエンスを向上させることができます。

任意のコントロールを検証する検証やクライアント側の検証を使用する一般的な検証シナリオでは、JavaScriptコードが生成されて、WebブラウザでHTMLとしてレンダリングされます。一方、控えめな検証では、クライアント側の検証を処理するためにレンダリングされるインラインJavaScriptは生成されません。その代わりに、HTML5 data-*属性をクライアント側検証に使用します。

次のInputコントロールで、控えめな検証をサポートできます。

InputColor
InputDate
InputDateTime
InputMask
InputNumber
AutoComplete
ComboBox
InputTime
MultiSelect

以下の手順を実装する前に、ComponentOneテンプレートまたはVisual Studioテンプレートを使用して、新しいMVCアプリケーションを作成する必要があります。

このトピックは4つの手順で構成されます。

手順1：MVCアプリケーションの構成
手順2：入力コントロールの検証の作成
手順3：入力コントロールの追加
手順4：プロジェクトのビルドおよび実行

手順1：MVCアプリケーションの構成

Razor	コードのコピー
次の手順を実行して、アプリケーションにjsファイルの参照を追加します。ソリューションエクスプローラーで、［ビュー］→［共有］フォルダを開きます。 _Layout.cshtmlをダブルクリックして開きます。 <head></head>タグの間に以下のコードを追加します。 Razorコードのコピー <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/jquery.validate.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

Razor

コードのコピー

次の手順を実行して、アプリケーションにjsファイルの参照を追加します。
ソリューションエクスプローラーで、［ビュー］→［共有］フォルダを開きます。 
_Layout.cshtmlをダブルクリックして開きます。 
<head></head>タグの間に以下のコードを追加します。 
Razorコードのコピー 
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

手順2：入力コントロールの検証の作成

モデル - Form.cs

Razor	コードのコピー
using System.ComponentModel.DataAnnotations; namespace UnobtrusiveValidationSample.Models { public class Form { [Required] public string ID { get; set; } [Required] [DataType(DataType.Text)] [MinLength(8)] [MaxLength(30)] public string 名前 { get; set; } [Required] [DataType(DataType.PhoneNumber)] [Phone] [Range(0, 10000000000)] [StringLength(11)] [MinLength(7)] [MaxLength(10)] public string 電話番号 { get; set; } [Required] [DataType(DataType.EmailAddress)] [EmailAddress] [MinLength(10)] [MaxLength(50)] public string Email { get; set; } } }

Razor

コードのコピー

using System.ComponentModel.DataAnnotations;
namespace UnobtrusiveValidationSample.Models
{
    public class Form
    {
        [Required]

        public string ID { get; set; }

        [Required]
        [DataType(DataType.Text)]
        [MinLength(8)]
        [MaxLength(30)]

        public string 名前 { get; set; }

        [Required]
        [DataType(DataType.PhoneNumber)]
        [Phone]
        [Range(0, 10000000000)]
        [StringLength(11)]
        [MinLength(7)]
        [MaxLength(10)]

        public string 電話番号 { get; set; }

        [Required]
        [DataType(DataType.EmailAddress)]
        [EmailAddress]
        [MinLength(10)]
        [MaxLength(50)]

        public string Email { get; set; }

    }
}

手順3：入力コントロールの追加

ビュー - Index.cshtml

Razor	コードのコピー
@using UnObtrusiveValidationSample.Models; @model Form @using (Html.BeginForm()) { <br /> @Html.LabelFor(m => m.ID) <br /> @Html.EditorFor(m => m.ID) @Html.ValidationMessageFor(m => m.ID) <br /> @Html.LabelFor(m => m.名前) <br /> @Html.EditorFor(m => m.名前) @Html.ValidationMessageFor(m => m.名前) <br /> @Html.LabelFor(m => m.電話番号) <br /> @Html.EditorFor(m => m.電話番号) @Html.ValidationMessageFor(m => m.電話番号) <br /> @Html.LabelFor(m => m.Email) <br /> @Html.C1().InputMaskFor(m => m.Email) @Html.ValidationMessageFor(m => m.Email) <br /> <input type="クエリ送信" /> <input type="リセット" /> }

Razor

コードのコピー

@using UnObtrusiveValidationSample.Models;
@model Form
@using (Html.BeginForm())
{
    <br />
    @Html.LabelFor(m => m.ID)
    <br />
    @Html.EditorFor(m => m.ID)
    @Html.ValidationMessageFor(m => m.ID)
    <br />

    @Html.LabelFor(m => m.名前)
    <br />
    @Html.EditorFor(m => m.名前)
    @Html.ValidationMessageFor(m => m.名前)
    <br />

    @Html.LabelFor(m => m.電話番号)
    <br />
    @Html.EditorFor(m => m.電話番号)
    @Html.ValidationMessageFor(m => m.電話番号)
    <br />

    @Html.LabelFor(m => m.Email)
    <br />
    @Html.C1().InputMaskFor(m => m.Email)
    @Html.ValidationMessageFor(m => m.Email)
    <br />
    <input type="クエリ送信" />
    <input type="リセット" />
}

先頭に戻る

手順4：プロジェクトのビルドおよび実行

［ビルド］→［ソリューションのビルド］をクリックして、プロジェクトをビルドします。
［F5］キーを押してプロジェクトを実行します。

先頭に戻る