MVC - 如果在正则表达式验证失败时不希望我的电子邮件字段显示错误,该怎么办?
问题描述:
我正在创建一个使用Kendo验证的MVC页面。MVC - 如果在正则表达式验证失败时不希望我的电子邮件字段显示错误,该怎么办?
我有以下型号:
public class ForgotPasswordModel
{
[Required(ErrorMessage = " ")]
public string UserName { get; set; }
[Required(ErrorMessage = " ")]
[EmailAddress(ErrorMessage = " ")]
public string Email { get; set; }
public string PhoneNumber { get; set; }
[Required(ErrorMessage = " ")]
public string Code { get; set; }
}
我不希望我的视图来显示错误信息的电子邮件字段。我希望它在验证失败时只显示惊叹号。
目前我有在我看来,下面的代码:
@model Site.Models.ForgotPasswordModel
@{
ViewBag.Title = "Forgot Password";
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width" />
<title>Login</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/kendo/kendo.common-material.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.custom.css" rel="stylesheet" />
<link href="~/Content/kendo/custom.css" rel="stylesheet" />
<script src="~/Scripts/kendo/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/kendo.aspnetmvc.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<style>
input[type=text]::-ms-clear {
display: none;
}
input[type=password]::-ms-reveal {
display: none;
}
.errMsg {
font-weight: bolder;
color: red;
}
span#UserName_validationMessage, span#Email_validationMessage,span#Code_validationMessage {
display: inline-block;
width: 160px;
text-align: left;
border: 0;
padding: 0;
margin: -20px;
background: none;
box-shadow: none;
color: red;
}
.k-invalid-msg {
display: none;
}
</style>
</head>
<body>
<div>
</div>
<div style="margin-top: 20px;">
<div style="margin: 0 auto; width: 940px; height: 409px; background-image: url('../../Content/images/finance-globe.jpg');"/>
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "ForgotPasswordForm" }))
{
<div style="margin: 0 auto; margin-top: 20px;">
<table id="ForgotPassword" style="margin: 0" auto;">
<tr style="height:40px;">
<td>@Html.EditorFor(x => x.UserName, new { htmlAttributes = new { @class = "form-control k-textbox checkError", placeholder = "username" } })</td>
</tr>
<tr style="height:40px;">
<td>@Html.EditorFor(x => x.Email, new { htmlAttributes = new { @class = "form-control k-textbox checkError", placeholder = "email" } })</td>
</tr>
<tr style="height:40px;">
<td>@Html.EditorFor(x => x.PhoneNumber, new { htmlAttributes = new { @class = "form-control k-textbox", placeholder = "phone number" } })</td>
</tr>
<tr style="height:40px;">
<td>@Html.EditorFor(x => x.Code, new { htmlAttributes = new { @class = "form-control k-textbox checkError", placeholder = "code" } })</td>
</tr>
</table>
</div>
}
</div>
</body>
</html>
<script>
$(document).ready(function() {
$("#ForgotPasswordForm").kendoValidator();
});
</script>
模型和视图产生如下:
我不想“电子邮件地址无效”消息在正则表达式验证失败的情况下显示。
我只需要一个感叹号。
我该怎么做?
答
对于您的电子邮件字段,您可以尝试添加data-email-msg
属性,这是为错误的电子邮件字段值自定义验证消息的方法。
对于例如:如果你想显示的电子邮件ID错误的值,你可以这样做一个空白消息:
<input type="email" name="email" id="email" name="email" data-email-msg="">
如果你想定制required field validation message
过,那么你可以添加一个又一个属性data-required-msg
如下:
<input type="email" name="email" id="email" name="email" data-email-msg="" data-required-msg="">