ASP MVC4+JQuery 验证不起作用答案

【问题标题】：ASP MVC4+JQuery validation doesn't workASP MVC4+JQuery 验证不起作用
【发布时间】：2012-11-09 07:43:36
【问题描述】：

我已按照 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>
}

html中的JS：

<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"];

            ......
        }

当我在调试模式下单击提交按钮时，它会跳转到这个索引函数而没有验证。

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

我遵循这个简单的验证demo

感谢回答问题的人。你给了我解决问题的方法。

脚本选项卡应以“</script>”而不是“/>”结尾所以这个“<script src="/Scripts/jquery.validate.js" type="text/javascript" />”不能工作但是这个“<script src="/Scripts/jquery.validate.js" type="text/javascript" ></script>”有效
1后出现运行时错误，说“jscript运行时错误对象不支持这个属性或方法” 这是因为我们两次包含 jquery。

1,2 之后，验证正常。

【问题讨论】：

您是否考虑过不显眼的验证 (bradwilson.typepad.com/blog/2010/10/…)？不回答您的问题，但让处理客户端和服务器验证变得异常简单。
这不是我想要的。请参考我的演示链接。这是简单而纯粹的jquery。这就是我想要的
我明白你想要什么，仅供参考。 UV 使用 jQuery 和 jQuery Validation，它只是增强了 jQuery Validation，所以你不必做你现在正在苦苦挣扎的手动连接。

标签： jquery asp.net asp.net-mvc razor jquery-validate

【解决方案1】：

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

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

【讨论】：

我只包含 jquery 和 jquery.validate，从不包含 unobtrusive。有什么想法吗？
假设您没有一些 javascript 错误，这应该可以工作。你看过javascript控制台吗？您是否查看了 javascript 调试工具的网络选项卡以确保在引用脚本时没有 404 错误？您是否确保在您的视图或布局中没有引用任何包？
“您的视图或布局中从未引用任何包”是什么意思。 BTW 在哪里可以看到 vs2010 中的 javascript 控制台？
@user838204，VS 中没有 javascript 控制台。它在您的浏览器中。例如，如果您使用的是 FireFox，则可以使用 FireBug。

【解决方案2】：

除非您 OP 的代码粘贴错误，否则您的括号/括号不匹配。 document.ready() 函数未正确关闭 - 您缺少关闭 });

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"
            }
        }
    });

【讨论】：