ASP MVC4 + JQuery验证不起作用

Question

我按照Internet中的步骤设置密码验证。

我正在使用ASP.NET MVC4 + razor + jquery，但验证似乎不起作用。这是我的代码：

CSHTML：

@using (Html.BeginForm("Index","Home",FormMethod.Post,new { id="resetForm"}))
{

    <ol class="round">
    <li class="one">
        <h5>Select the Application.</h5>
        @model PWDManagementCenter.Models.UserApplicationModels

        @Html.DropDownListFor(x => x.selectedUserApp, Model.userApps)
    </li>

    <li class="two">
        <h5>Input Login ID of Application</h5>
        <input name="txtLogonId"   />
    </li>

    <li class="three">
        <h5>Input the new password</h5>
        <input id="txtPwd" name="txtPwd" type="password" />
        <h6>Retype the password</h6>
        <input id="txtPwd2" name="txtPwd2" type="password" /><p />
        <input id="btnSubmit" type="submit" value="Save" />
    </li>
</ol>
}

JS中的HTML：

<script src="/Scripts/jquery-1.7.1.js" type="text/javascript" />
<script src="/Scripts/jquery.validate.js" type="text/javascript" />
<script type="text/javascript">
    $(document).ready(function () {
        $('#resetForm').validate({
            rules: {
                txtPwd: {
                    require: true, minlength: 6, maxlength: 20
                },
                txtPwd2: {
                    require: true, equalTo: '#txtPwd', minlength: 6, maxlegth: 20
                }
            },
            messages: {
                txtPwd: {
                    require: "Password is required!",
                    minlength: "Password contains at least 6 characters",
                    maxlength: "Password contains at most 20 characters"
                },
                txtPwd2: {
                    equalTo: "Make sure input the same password as above"
                }
            }
        });


</script>

和控制器：

[HttpPost]
        public ActionResult Index(UserApplicationModels model)
        {
            string appName = model.selectedUserApp;
            string id = Request.Form["txtLogonId"];
            string newPwd = Request.Form["txtPwd"];
            string newPwd2 = Request.Form["txtPwd2"];

            ......
        }

当我在调试模式下单击提交按钮时，它会跳转到此索引函数而不进行验证。

为什么？ 我错过了什么？ 请帮忙。

我按照这个简单的验证演示

感谢那些回答这个问题的人。 你给了我点击来解决问题。

1. 脚本选项卡应该以“ </script> ”而不是“ /> ”结尾所以这个“ <script src="/Scripts/jquery.validate.js" type="text/javascript" /> ”不能工作但是这个“ <script src="/Scripts/jquery.validate.js" type="text/javascript" ></script> ”的作品

2. 在1之后，我收到一个运行时错误，说“jscript运行时错误对象不支持此属性或方法”这是因为我们包含了两次jquery。

1,2之后，验证是正常的。

Answer 1

1. 除非你的OPed代码被错误地粘贴，否则括号/括号内容不匹配。 document.ready()函数没有正确关闭 - 你错过了关闭});

2. 它required不是“要求”

    $('#resetForm').validate({ rules: { txtPwd: { required: true, minlength: 6, maxlength: 20 }, txtPwd2: { required: true, equalTo: '#txtPwd', minlength: 6, maxlegth: 20 } }, messages: { txtPwd: { required: "Password is required!", minlength: "Password contains at least 6 characters", maxlength: "Password contains at most 20 characters" }, txtPwd2: { equalTo: "Make sure input the same password as above" } } }); 

Answer 2

您似乎手动编写了jquery验证脚本，而不依赖于ASP.NET MVC中内置的不显眼的jquery验证。 如果是这种情况，请确保从未在页面中引用jquery.validate.unobtrusive脚本。 同样在ASP.NET MVC 4 Internet模板中有一个包含此脚本的~/bundles/jqueryval包，因此请确保您从未将其包含在页面或布局中。

您只需要jquery和jquery.validate脚本。 还要检查您的JavaScript控制台，以确保没有任何错误。