繁体   English   中英

ASP.NET 核心 6 jQuery 验证不起作用

[英]ASP.NET Core 6 jQuery Validation not working

我正在使用 ASP.NET Core 6 编写一个简单的 web 应用程序,并且我想使用 jQuery 验证。

我在 wwwroot 中包含 jQuery、jquery-validate 和 jquery-validation-unobtrusive,然后将它们包含在我的_Layout.cshtml中:

@using LinarLedManagement.Extensions;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - LinarLedManagement</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/LinarLedManagement.styles.css" asp-append-version="true" />
    
    <script src="~/jquery/jquery.js"></script>
    <script src="~/jquery-validate/jquery.validate.min.js"></script>
    <script src="~/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
    
    <script src ="~/js/bundle.min.js"></script>
</head>
<style>
html, body { height: 100%; }
</style>
<body style="height:100%; width:100%;">
    <header>
       <!-- aqui va el partial view del menu-->
    </header>
    
    <div class="container-fluid w-100 h-100">
        @RenderBody()
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

然后我创建了一个简单的视图:

@model LoginModel
<script>
    let login = new Login();
</script>

<div class="container h-100 d-flex align-items-center justify-content-center">
    @using(Html.BeginFormPostWithID("Login","Login","loginForm")){
        <div class="card" style="width:25rem">
            <div class="card-body">
                <div class="row mb-3">
                    @Html.LabelFor(m=>m.UserName,new {@class = "col-sm-4 col-form-label"})
                    <div class="col-sm-8">
                        @Html.TextBoxFor(m=>m.UserName,new {@class = "form-control"})
                    </div>
                </div>
                <div class="row mb-3">
                    @Html.LabelFor(m=>m.Password,new {@class = "col-sm-4 col-form-label"})
                    <div class="col-sm-8">
                        @Html.PasswordFor(m=>m.Password,new {@class = "form-control"})
                    </div>
                </div>
                <div class="row d-flex justify-content-center">
                    <input type="button" class="btn btn-primary align-self-center col-sm-4" value ="@Resources.Resource.Login" onclick="login.submit()"/>
                </div>
            </div>
        </div>
    }
</div>

使用 Typescript 文件:

class Login() {
    constructor() {
        LoginValidation.validateLoginFields();
    }

    public submit() {
        $('#loginForm').validate();
    }
}

class LoginValidation {
    constructor() { }

    public static validateLoginFields() {
        $('#UserName').rules("add", {
            required: true
        });
        $('#Password').rules("add", {
            required: true
        });
    }
}

但是当我点击按钮时,它总是得到一个

未捕获的类型错误:$(...).validate 不是 function...

这是 wwwroot 结构:

www根结构

有人可以帮我吗?

就像Sparky在评论中所说的那样,问题是我包含了两次 jQuery (一次在head ,另一个在body中)我只是删除了body的包含,它现在可以工作了!

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM