javascript - 如何使用 asp.net mvc 验证错误消息?
问题描述
我有一个包含以下字段的表格:街道地址、街道地址第 2 行、城市、州/省、邮政编码和国家。离开表单时,我正在努力验证错误消息。
我尝试在模型上使用Required(Error Message="Field is required")。我没能做到这一点。所有这些提到的字段都必须以红色突出显示,但在离开州/省时,它必须通过错误消息“需要字段”进行验证。这是我到目前为止代码试图做的尝试。
// Model class
[Required(ErrorMessage = "This field is required")]
public string State { get; set; }
查看.cshtml
<div class="row">
<label for="Address">Address</label>
<div class="col-md-6 ">
<div class="input-group pull-right">
@Html.TextBoxFor(m => m.HomeMainModel.Address, new { @class = "form-control", type = "text", id = "inputFormVal",autofocus = "autofocus", placeholder = "Street Address", required = "required" })
<div class="input-group-append">
<div class="input-group-text">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<label id="labelMessageBx" class="text-danger" style="display:none"></label>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-6 ">
<div class="input-group pull-right">
@Html.TextBoxFor(m => m.HomeMainModel.Address, new { @class = "form-control", type = "text", id="inputFormVal", autofocus = "autofocus", placeholder = "Street Address Line 2", required = "required" })
<div class="input-group-append">
<div class="input-group-text">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<label id="labelMessageBx" class="text-danger" style="display:none"></label>
</div>
</div>
<hr />
<div class="form-group">
<div class="input-group mb-2">
<div class="input-group-prepend">
</div>
<div class="input-group col-md-7 col-md-offset-7 col-sm-7 col-xs-7">
<div class="input-group pull-right">
@Html.TextBoxFor(m => m.HomeMainModel.City, new { @class = "form-control", type = "text", id = "inputFormVal", autofocus = "autofocus", placeholder = "City" })
@Html.TextBoxFor(m => m.HomeMainModel.Code, new { @class = "form-control", type = "text", id = "inputFormVal", autofocus = "autofocus", placeholder = "Province" })
</div>
</div>
</div>
<div class="col-md-6">
<label id="labelMessageBx" class="text-danger" style="display:none"></label>
</div>
<hr />
<!--Zip code for postal code-->
<div class="input-group mb-2">
<div class="input-group-append">
</div>
<div class="input-group col-md-7 col-md-offset-3 col-sm-2 col-xs-2">
<div class="input-group pull-right">
@Html.TextBoxFor(m => m.HomeMainModel.Code, new
{
@class = "form-control",
type = "text",
id = "inputFormVal",
autofocus = "autofocus",
placeholder = "Postal/Zip Code"
})
@Html.DropDownListFor(m => m.HomeMainModel.SelectedCountryId, this.ViewBag.CountryList as SelectList, new { @class = "form-control" })
<div class="input-group-append">
<div class="input-group-text">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<label id="labelMessageBx" class="text-danger" style="display:none"></label>
</div>
</div>
</div>
// function when leaving texbox for city, street address, street_address_line2, state_province.
$(function() {
$('#inputFormVal').blur(function() {
var city = document.getElementById("inputFormVal").value;
var expr = /^([\w-\.]+)@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (!expr.test(city)) {
document.getElementById("labelMessageBx").style.display = "inline";
} else {
document.getElementById("labelMessageBx").style.display = "none";
}
});
});
解决方案
将此添加到您的底部页面并检查您是否有验证器脚本。
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
推荐阅读
- firebase - FLUTTER,FIRESTORE:我有一个流构建器,它从集合中的所有文档中返回某个字段。我如何添加查询?
- c - Linux 中的 unistd_64.h
- c# - C# ASP.NET JQuery 脚本在部署到 IIS 10 后未加载
- php - 当我从 SMTP 发送电子邮件时,它的代码成功运行,但我没有在该电子邮件地址上收到电子邮件?
- html - 为原始 HTML 中的元素添加事件处理程序
- python - 使用 Pandas 在 Python 中打印数据帧的列标题
- c# - C# 多线程在 FOR 循环中开始和停止
- python - Nuitka 和 numpy-mkl 问题,同时构建可执行文件
- arrays - fortran 中 blas 的包装器
- c# - 在 C# 中使用 alglib 进行双线性变换的计算错误