Asp.net mvc 4 未从javascript更改setCustomValidity

我在ASP.Net中有一个带有Razor视图引擎的MVC4视图。我正在尝试验证2个密码文本框的自定义内容，但当我尝试在“check（this）”javascript函数中更改验证消息时，它仍然显示“this data is a must”的原始验证文本，而它应该显示“Passwords not match”

问题：为什么javascript不能为密码字段设置CustomValidity

@{
    ViewBag.Title = "HelloWorld";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>HelloWorld</h2>
<div>This is a sample Hello World page</div>
<h1>@ViewBag.Title</h1>
<h2>@ViewBag.Message</h2>
@using (Html.BeginForm("HandleSubmit", "Home"))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()

    <fieldset>
        <legend>Registration Form</legend>
        <ol>
            <li>
                @Html.TextBox("username", null, new { @required = "required", @oninvalid = "this.setCustomValidity('This data is a must')", @placeholder = "Input User Name" })
            </li>
            <li>
                @Html.Label("pwd", "Password")
                @Html.Password("pwd", null, new { @required = "required", @oninvalid = "this.setCustomValidity('This data is a must')", @placeholder = "Input Password" })
            </li>
            <li>
                @Html.Label("cpwd", "Confirm Password")
                @Html.Password("cpwd", null, new { @required = "required", @oninvalid = "this.setCustomValidity('This data is a must')", @placeholder = "Confirm Password", @onblur = "check(this)" })
            </li>
        </ol>
        <input type="submit" value="TestPost" onclick="checkpwds()" />
        <div style="color:red;font-weight:bold">@ViewBag.Feedback</div>
    </fieldset>
}
<script language='javascript' type='text/javascript'>
    function check(input) {
        if (input.value != document.getElementById('pwd').value) {
            input.setCustomValidity('Password Must be Matching.');
        } else {
            input.setCustomValidity('');
        }
    }

    function checkpwds() {
        if (document.getElementById('pwd').value != document.getElementById('pwd').value) {
            document.getElementById('pwd').setCustomValidity('Password Must be Matching.');
        } else {
            document.getElementById('pwd').setCustomValidity('');
        }
    }
</script>

@{
ViewBag.Title=“HelloWorld”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
你好世界
这是一个示例Hello World页面
@视图包。标题
@查看包。留言
@使用（Html.BeginForm（“HandleSubmit”、“Home”））
{
@Html.AntiForgeryToken（）
@Html.ValidationSummary（）
登记表

@Html.TextBox（“用户名”，null，新{@required=“required”，@oninvalid=“this.setCustomValidity（'this data is must'），@placeholder=“Input User Name”}）


@标签（“密码”、“密码”）
@Html.Password（“pwd”，null，新的{@required=“required”，@oninvalid=“this.setCustomValidity（'this data is must'），@placeholder=“Input Password”}）


@标签（“cpwd”，“确认密码”）
@Html.Password（“cpwd”，null，新的{@required=“required”，@oninvalid=“this.setCustomValidity（'this data's must'），@placeholder=“Confirm Password”，@onblur=“check（this）”}）

@查看包。反馈
}
功能检查（输入）{
if（input.value！=document.getElementById（'pwd'）.value）{
setCustomValidity（'密码必须匹配'）；
}否则{
input.setCustomValidity（“”）；
}
}
函数checkpwds（）{
if（document.getElementById（'pwd'）.value！=document.getElementById（'pwd'）.value）{
document.getElementById（'pwd'）。setCustomValidity（'密码必须匹配'）；
}否则{
document.getElementById（'pwd'）.setCustomValidity（''）；
}
}

更新1： 正如Stephen在下面的评论中所建议的，我从所有文本框中删除了oninvalid事件，并在focus离开文本框时调用了“check”JavaScript方法，即在onblur事件中，我能够做到这一点。下面给出了修改后的代码

我使用了一个名为“check”的JavaScript函数作为所有文本框的验证方法，我可以在其中放入我喜欢的任何自定义验证，我在所有文本框的onblur事件中调用此方法这使我可以完全自由地验证自己的身份。您还可以使用oninput事件触发check而不是onblur的验证方法，这将在键入有效输入后立即清除验证消息，而不是在离开焦点时清除

 @{
    ViewBag.Title = "HelloWorld";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>HelloWorld</h2>
<div>This is a sample Hello World page</div>
<h1>@ViewBag.Title</h1>
<h2>@ViewBag.Message</h2>
@using (Html.BeginForm("HandleSubmit", "Home"))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()

    <fieldset>
        <legend>Registration Form</legend>
        <ol>
            <li>
                @Html.TextBox("username", null, new { placeholder = "Input User Name",
                               @onblur = "check(this)" })
            </li>
            <li>
                @Html.Label("pwd", "Password")
                @Html.Password("pwd", null, new { @placeholder = "Input Password", 
                                @onblur = "check(this)" })
            </li>
            <li>
                @Html.Label("cpwd", "Confirm Password")
                @Html.Password("cpwd", null, new {  @placeholder = "Confirm Password",
                                 @onblur = "check(this)" })
            </li>
        </ol>
        <input type="submit" value="TestPost"  />
        <div style="color:red;font-weight:bold">@ViewBag.Feedback</div>
    </fieldset>
}
<script language='javascript' type='text/javascript'>
    function check(input) {

        if (input.id == "cpwd" && input.value != document.getElementById('pwd').value && input.value != '') {
            input.setCustomValidity('Password Must be Matching.');
        }
        else if (input.value == '') {
            input.setCustomValidity('Required Data!'); 
        }
        else {
            input.setCustomValidity('');
        }
    }
</script>

@{
ViewBag.Title=“HelloWorld”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
你好世界
这是一个示例Hello World页面
@视图包。标题
@查看包。留言
@使用（Html.BeginForm（“HandleSubmit”、“Home”））
{
@Html.AntiForgeryToken（）
@Html.ValidationSummary（）
登记表

@TextBox（“用户名”，空，新的{placeholder=“输入用户名”，
@onblur=“检查（此）”}


@标签（“密码”、“密码”）
@密码（“pwd”，null，新的{@placeholder=“输入密码”，
@onblur=“检查（此）”}


@标签（“cpwd”，“确认密码”）
@密码（“cpwd”，null，新的{@placeholder=“Confirm Password”，
@onblur=“检查（此）”}

@查看包。反馈
}
功能检查（输入）{
if（input.id==“cpwd”&&input.value！=document.getElementById（'pwd'）。value&&input.value！=''）{
setCustomValidity（'密码必须匹配'）；
}
else if（input.value==''）{
input.setCustomValidity（'Required Data！'）；
}
否则{
input.setCustomValidity（“”）；
}
}

文档。addEventListener（“DOMContentLoaded”，函数（）{
var elements=document.getElementsByTagName（“输入”）；
对于（var i=0；i

---

有关详细信息，请检查此项-

您也在使用模型验证？？？您可能需要调用

checkValidity（）以触发更新message@Exception，我没有使用模型验证。我正在用这个没有模型的实践示例学习MVC4。@StephenMuecke，在我的示例代码中需要在哪里调用这个checkValidity方法？我以前没有使用过它，所以不确定，但请在
checkpwds（）
函数中的
if/else
块后重试。我怀疑
@oninvalid=“this.setCustomValidity（'this data is must'）”
可能正在覆盖您在
checkpwds（）中执行的操作。您可以尝试将
@oninvalid
位移动到一个单独的函数中，添加一些断点并逐步遍历代码，以便查看哪个先被调用。
document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("This field cannot be left blank");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})