メールIDの形式が正しいかどうかを確認したい
RazorテキストボックスにEmailidと入力しているときに、正しい形式の場合はチェックマークが表示されます。
それ以外の場合は、テキストボックスの下にエラーメッセージが表示されます。
私を案内してください..それを行う方法
メールIDの形式が正しいかどうかを確認したい
RazorテキストボックスにEmailidと入力しているときに、正しい形式の場合はチェックマークが表示されます。
それ以外の場合は、テキストボックスの下にエラーメッセージが表示されます。
私を案内してください..それを行う方法
カスタム検証属性を作成できます。
public class EmailAttribute : ValidationAttribute, IClientValidatable
{
private const string Pattern = @"^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$";
private static readonly Regex _regex = new Regex(Pattern, RegexOptions.Compiled | RegexOptions.IgnoreCase);
public override bool IsValid(object value)
{
if (value == null)
{
return true;
}
var input = value as string;
return ((input != null) && (_regex.Match(input).Length > 0));
}
public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
yield return new ModelClientValidationRegexRule(
base.ErrorMessage,
Pattern
);
}
}
これは、ビューモデルプロパティを次のように装飾するために使用されます。
public class MyViewModel
{
[Email(ErrorMessage = "Please specify a valid email address")]
public string Email { get; set; }
}
次に、コントローラーがあると仮定します。
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new MyViewModel());
}
[HttpPost]
public ActionResult Index(MyViewModel model)
{
return View(model);
}
}
とビュー:
@model MyViewModel
@using (Html.BeginForm())
{
<div>
@Html.LabelFor(x => x.Email)
@Html.EditorFor(x => x.Email)
@Html.ValidationMessageFor(x => x.Email)
</div>
<button type="submit">OK</button>
}
簡単なスクリプトを記述して、目立たない検証フレームワークにプラグインし、探しているものを実現することができます。次に、次の内容の別のjavascriptファイル(email.js)を作成します。
$(function () {
var settings = $('form').data('validator').settings;
settings.onkeyup = function (element) {
$(element).nextAll('.tick').remove();
if ($(element).valid()) {
$(element).after('<span class="tick">✔</span>');
}
};
});
そして最後のステップはもちろん、クライアント側の検証を可能にするためにページに3つのスクリプトを含めることです。
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/email.js")" type="text/javascript"></script>