[英]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 结构:
有人可以帮我吗?
就像Sparky在评论中所说的那样,问题是我包含了两次 jQuery (一次在head
,另一个在body
中)我只是删除了body
的包含,它现在可以工作了!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.