Question

我想验证电子邮件ID格式是否正确

在Razor文本框中键入Emailid时，如果格式正确，则应显示刻度线

否则错误消息应显示在文本框下方。

请指导我......怎么做

Answer 1

您可以编写自定义验证属性：

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>

在文本框中键入电子邮件ID时，它应验证格式并使用MVC3 RAZOR显示刻度图像

1 个答案: