Validation
Validation
控えめな検証
機能
サンプル
アカウントを作成します
説明
このサンプルでは、控えめな検証の基本的な使用方法を示します。
ソース
RegisterController.cs
using Microsoft.AspNetCore.Mvc;
using MvcExplorer.Models;
namespace MvcExplorer.Controllers
{
public class ValidationController : Controller
{
[HttpGet]
public ActionResult Register()
{
return View(new UserInfo() { Country = "" });
}
[HttpPost]
public ActionResult Register(UserInfo userInfo)
{
ViewBag.IsValid = ModelState.IsValid;
return View(userInfo);
}
}
}
Register.cshtml
@model UserInfo
@if (ViewBag.IsValid == true)
{
<p><h3>@Html.Raw(ValidationRes.Register_RegistrationComplete)</h3></p>
<div style="height:200px">
@Html.Raw(ValidationRes.Register_Text0) @Model.Name@Html.Raw(ValidationRes.Register_Text1)
</div>
}
else
{
@section Scripts{
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
}
<h3>@Html.Raw(ValidationRes.Register_CreateAnAccount)</h3>
<br />
<form asp-action="Register">
<div class="container" style="width: 100%">
<div class="row">
<div class="col-md-2">
<label asp-for="Name"></label>
</div>
<div class="col-md-2">
<c1-input-mask for="Name" width="100%"></c1-input-mask>
</div>
<div class="col-md-4">
<span asp-validation-for="Name"></span>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label asp-for="Email"></label>
</div>
<div class="col-md-2">
<c1-input-mask for="Email" width="100%"></c1-input-mask>
</div>
<div class="col-md-4">
<span asp-validation-for="Email"></span>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label asp-for="Password"></label>
</div>
<div class="col-md-2">
<input type="password" asp-for="Password" class="form-control" />
</div>
<div class="col-md-4">
<span asp-validation-for="Password"></span>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label asp-for="ConfirmPassword"></label>
</div>
<div class="col-md-2">
<input type="password" asp-for="ConfirmPassword" class="form-control" />
</div>
<div class="col-md-4">
<span asp-validation-for="ConfirmPassword"></span>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label asp-for="Phone"></label>
</div>
<div class="col-md-2">
<c1-input-mask for="Phone" mask="+8600000000000" width="100%"></c1-input-mask>
</div>
<div class="col-md-4">
<span asp-validation-for="Phone"></span>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label asp-for="Country"></label>
</div>
<div class="col-md-2">
<c1-auto-complete for="Country">
<c1-items-source source-collection="UsersData.Countries"></c1-items-source>
</c1-auto-complete>
</div>
<div class="col-md-4">
<span asp-validation-for="Country"></span>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label asp-for="Industry"></label>
</div>
<div class="col-md-2">
<c1-combo-box for="Industry" display-member-path="name" selected-value-path="value">
<c1-items-source source-collection="UsersData.Industries"></c1-items-source>
</c1-combo-box>
</div>
<div class="col-md-4">
<span asp-validation-for="Industry"></span>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label asp-for="Birthdate"></label>
</div>
<div class="col-md-2">
<c1-input-date for="Birthdate"></c1-input-date>
</div>
<div class="col-md-4">
<span asp-validation-for="Birthdate"></span>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label asp-for="FavoriteColor"></label>
</div>
<div class="col-md-2">
<c1-input-color for="FavoriteColor"></c1-input-color>
</div>
<div class="col-md-4">
<span asp-validation-for="FavoriteColor"></span>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label asp-for="Skills"></label>
</div>
<div class="col-md-2">
<c1-multi-select for="Skills">
<c1-items-source source-collection="UsersData.SkillsList"></c1-items-source>
</c1-multi-select>
</div>
<div class="col-md-4">
<span asp-validation-for="Skills"></span>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label asp-for="Hobbies"></label>
</div>
<div class="col-md-2">
<c1-multi-auto-complete for="Hobbies">
<c1-items-source source-collection="UsersData.HobbyList"></c1-items-source>
</c1-multi-auto-complete>
<div class="text-muted">@Html.Raw(ValidationRes.Register_Text3)</div>
</div>
<div class="col-md-4">
<span asp-validation-for="Hobbies"></span>
</div>
</div>
<p><input type="submit" value="@(ValidationRes.Register_Register)" class="btn btn-primary" /></p>
</div>
</form>
}
@section Description{
@Html.Raw(ValidationRes.Register_Text2)
}
UserInfo.cs
using System;
using System.ComponentModel.DataAnnotations;
namespace MvcExplorer.Models
{
public class UserInfo
{
public UserInfo()
{
Birthdate = DateTime.Now;
}
public int Id { get; set; }
[Required(ErrorMessageResourceType = typeof(Localization.ValidationRes), ErrorMessageResourceName = "Required_Name_ErrorMessage")]
[RegularExpression(pattern: "^[a-zA-Z0-9]{4,10}$", ErrorMessageResourceType =typeof(Localization.ValidationRes), ErrorMessageResourceName = "Register_Name_ErrorMessage")]
public string Name { get; set; }
[Required(ErrorMessageResourceType = typeof(Localization.ValidationRes), ErrorMessageResourceName = "Required_Email_ErrorMessage")]
[EmailAddress]
public string Email { get; set; }
[Required]
[MinLength(6)]
[MaxLength(16)]
public string Password { get; set; }
[Required]
[Compare("Password")]
public string ConfirmPassword { get; set; }
[Required(ErrorMessageResourceType = typeof(Localization.ValidationRes), ErrorMessageResourceName = "Required_Phone_ErrorMessage")]
[MinLength(8)]
[MaxLength(11)]
public string Phone { get; set; }
[Required(ErrorMessageResourceType = typeof(Localization.ValidationRes), ErrorMessageResourceName = "Required_Country_ErrorMessage")]
public string Country { get; set; }
[Required(ErrorMessageResourceType = typeof(Localization.ValidationRes), ErrorMessageResourceName = "Required_Industry_ErrorMessage")]
public string Industry { get; set; }
[Required(ErrorMessageResourceType = typeof(Localization.ValidationRes), ErrorMessageResourceName = "Required_Birthdate_ErrorMessage")]
public DateTime Birthdate { get; set; }
[Required]
public string FavoriteColor { get; set; }
[Required]
[MinLength(2)]
[MaxLength(3)]
public string[] Skills { get; set; }
[Required]
public string[] Hobbies { get; set; }
}
}
マニュアル