0

メールIDの形式が正しいかどうかを確認したい

RazorテキストボックスにEmailidと入力しているときに、正しい形式の場合はチェックマークが表示されます。

それ以外の場合は、テキストボックスの下にエラーメッセージが表示されます。

私を案内してください..それを行う方法

4

1 に答える 1

2

カスタム検証属性を作成できます。

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">&#10004;</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>
于 2012-07-22T07:58:13.100 に答える