MVC.net jQuery 验证
-
09-06-2019 - |
题
在尝试避免使用 JavaScript 多年后,Iv 开始使用 Query for 验证 在 MVC asp.net 中,由于似乎没有官方的验证方法,我对 jQuery 的优秀感到惊讶。
首先,有没有办法让智能感知适用于 jQuery 及其验证插件,这样我就不必学习 api 了?
其次,如何为此创建验证摘要,它当前将错误附加到文本框的右侧:
<script type="text/javascript">
$().ready(function() {
$("#CreateLog").validate({
rules: {
UserName: {
required: true,
minLength: 2,
}
},
messages: {
UserName: {
required: "Please enter a username",
minLength: "Your username must consist of at least 2 characters",
}
}
});
});
</script>
<form id="CreateLog" action="Create" method="post" />
<label>UserName</label><br />
<%=Html.TextBox("UserName")%>
<br />
<div class="error"> </div>
<input type=submit value=Save />
</form>
我尝试将其添加到脚本中:
errorLabelContainer: $("#CreateLog div.error")
并将其添加到 html 中:
<div class="error"> </div>
但这没有用。
解决方案
尝试在选项中指定包装器和标签容器。我还添加了 display:none;
错误容器的样式让 jQuery 决定何时显示它。
$().ready(function() {
$("#CreateLog").validate({
errorLabelContainer: $("ul", $('div.error-container')),
wrapper: 'li',
rules: {
UserName: {
required: true,
minLength: 2,
}
},
messages: {
UserName: {
required: "Please enter a username",
minLength: "Your username must consist of at least 2 characters"
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="error-container">
<ul></ul>
</div>
<form id="CreateLog" action="Create" method="post" />
<label>UserName</label><br />
<%=Html.TextBox("UserName")%>
<br />
<input type=submit value=Save />
</form>
那应该有效。
其他提示
您可能想查看 卡尔·塞金的 ASP.NET MVC 验证方法 CodeBetter.com 和他的样本 应用画布.
有一个 Visual Studio 2008 修补程序 JQuery 智能感知 在 VS2008 。这也可能与 SP1 捆绑在一起。
关于 jquery(和其他插件)的智能感知:为了在您自己的脚本文件中也具有完整的智能感知,只需在 .js 文件的顶部为您想要智能感知的每个文件包含一次以下行:
/// <reference path="[insert path to script file here]" />
简单,但非常有用=)
不隶属于 StackOverflow