更改 MVC 验证用法

Question

我的 cshtml 页面中有第二个代码：

@using (Html.BeginForm())
{
    <div id="login">
        @Html.ValidationSummary(true, SignIn_cshtml.SignInWasUnsuccessful)
        <p>Login to menu</p>
        <div>
            @Html.TextBoxFor(m => m.UserName, new { id="input_name", placeholder="User Name" })
            @Html.ValidationMessageFor(m => m.UserName)
        </div>             
        &nbsp;
        <div>
            @Html.PasswordFor(m => m.Password, new { id="input_pwd", placeholder="Password" })
            @Html.ValidationMessageFor(m => m.Password)
        </div>              
        <div>
            @Html.CheckBoxFor(m => m.Enable)
            @Html.LabelFor(m => m.Enable)
        </div>
        <div>
            <input type="image" src="~/Content/images/LoginButton.png" value="@SignIn_cshtml.SignIn"/>
        </div>
    </div>
}
@section scripts
{
<script type="text/javascript">
    $(function () {
        $("#UserName").focus();     
    });

    $(document).ready(function () {

        function add() {
            if ($(this).val() === '') {
                $(this).val($(this).attr('placeholder')).addClass('placeholder');
            }
        }

        function remove() {
            if ($(this).val() === $(this).attr('placeholder')) {
                $(this).val('').removeClass('placeholder');
            }
        }

        if (!('placeholder' in $('<input>')[0])) {

            $('input[placeholder], textarea[placeholder]').blur(add).focus(remove).each(add);

            $('form').submit(function () {
                $(this).find('input[placeholder], textarea[placeholder]').each(remove);
            });
        }
    });
</script>
}

一切正常。如果用户名或密码不正确，我会在他们的文本框下收到消息。

问题是现在我需要改变它。而不是用户名或密码的验证消息，我需要将它们的文本颜色更改为红色（直到我猜新关注文本框）。验证摘要也应该移到底部，在登录 div 之外（在它自己的），并且应该以某种样式出现。听起来并不难（使用 javascript），但问题是我无法更改验证。所有验证消息都应该存在。

据我所知，我应该以某种方式运行 javascript，它将显示带有验证摘要的 div，直到新的焦点，应该将文本框值从黑色重新着色为红色，但我该如何运行这个脚本？我的意思是，在用户名或密码发生错误的那一刻？

P.S 对不起，我的英语不好。

Answer 1

我希望我能理解您正在尝试正确执行的操作，但您不需要任何自定义验证脚本。在您的脚本部分中包含内置的客户端 javascript：

@Scripts.Render("~/bundles/jqueryval")

使用 DataAnnotations 属性标记您的模型类，例如：

using System.ComponentModel.DataAnnotations;
public class LoginModel {
    [DataType(DataType.Text, ErrorMessage="Invalid entry."), 
    MaxLength(100, ErrorMessage="Username must be 100 characters or less."),
    Required(AllowEmptyStrings=false, ErrorMessage="UserName is required.")]
    public string UserName { get; set; }
    ...
}

至于您的验证摘要，您可以将其移动到任何您想要的位置。要添加一些外观和感觉，只需使用重载：

@if (!ViewData.ModelState.IsValid) {
    @Html.ValidationSummary(true, "Please fix the following errors:", new { @class = "alert alert-danger"})
}

Answer 2

当文本框出现验证错误时，它会添加 CSS 类 input-validation-error。因此，如果您想让文本框中的文本变为红色，只需找到它（它将在默认 MVC 项目的 Site.css 中）并将其更改为：

input.input-validation-error {
    border: 1px solid #b94a48;
    color:#FF0000;
}

纠正此问题后，该类将自动删除并将文本改回黑色。

要将验证摘要移到登录 div 之外，只需移动 @Html.ValidationSummary()。您可以通过更改 .validation-summary-errors 的 css 来设置它的样式（也在 Site.css 中）。