MVC - 如果在正则表达式验证失败时我不希望我的电子邮件字段显示错误,我该怎么办?

时间:2017-09-26 17:56:06

标签: regex asp.net-mvc kendo-ui kendo-validator

我正在创建一个使用Kendo验证的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>

模型和视图产生以下内容:

enter image description here

我不想&#34;电子邮件无效&#34;正则表达式验证失败时显示的消息。

我只需要一个惊叹号。

我该怎么做?

1 个答案:

答案 0 :(得分:0)

对于您的电子邮件字段,您可以尝试添加function runPagespeed() { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; var query = [ 'url=' + encodeURIComponent(URL_TO_GET_RESULTS_FOR), 'strategy=' + strategy, 'callback=runPagespeedCallbacks', 'key=' + API_KEY, ].join('&'); s.src = API_URL + query; document.head.insertBefore(s, null); } 属性,这是为错误的电子邮件字段值自定义验证邮件的方法。

例如:如果您想为电子邮件ID显示错误值的空白消息,您可以执行以下操作:

data-email-msg

如果您也要自定义<input type="email" name="email" id="email" name="email" data-email-msg=""> ,那么您可以添加另一个属性required field validation message,如下所示:

data-required-msg