2017-09-26 7 views
1

검도 검증을 사용하는 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> 

모델과 뷰는 다음을 생산 :

enter image description here

I가 메시지 "이메일이 유효하지 않습니다"원하지 않는 정규식 검증에 실패 할 경우 표시됩니다.

느낌표가 필요합니다.

어떻게하면됩니까?

답변

0

전자 메일 필드에 잘못된 전자 메일 필드 값에 대한 유효성 검사 메시지를 사용자 지정하는 방법 인 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="">