javascript - 如何使用客户端验证在 c# 中处理您的 asp.net mvc?
问题描述
@EditorFor()
我使用 jQuery 进行客户端验证,以验证我的控件何时有空白空间。但是,当我过滤任何数据时,错误不会消失。
我的逻辑中还需要一些示例,因为当错误弹出时,必须在中心显示图像,目前它在侧面。
// Model
[Required]
public int ZipCode { get; set; }
public string Country { get; set; }
[Required]
public string Email { get; set; }
[Required]
public string CellNumber { get; set; }
// View
<div class="form-group row">
<label for="ZipCode" class="col-sm-2 col-form-label"></label>
<div class="col-sm-3">
@Html.EditorFor(model => model.RegForm.ZipCode, new { htmlAttributes = new { @class = "form-control", autofocus = "autofocus", placeholder = "ZipCode", id = "textZipCode" } })
@Html.ValidationMessageFor(model => model.RegForm.ZipCode, "", new { @class = "text-danger" })
</div>
<label id="labelMessage_zip" class="text-danger" style="display:none">This field is required</label>
</div>
<div class="form-group row">
<label for="Email" class="col-sm-2 col-form-label">Email:</label>
<div class="col-sm-4">
@Html.EditorFor(model => model.RegForm.Email, new { htmlAttributes = new { @class = "form-control", autofocus = "autofocus", placeholder = "Email", id = "textEmail" } })
@Html.ValidationMessageFor(model => model.RegForm.Email, "", new { @class = "text-danger" })
</div>
<label id="labelMessage_email" class="text-danger" style="display:none">This field is required</label>
</div>
<div class="form-group row">
<label for="Attendee" class="col-sm-2 col-form-label">Attendee Cell Number*</label>
<div class="col-sm-3">
@Html.EditorFor(model => model.RegForm.CellNumber, new { htmlAttributes = new { @class = "form-control", autofocus = "autofocus", placeholder = "Cell Number", id ="textCellNumber" } })
@Html.ValidationMessageFor(model => model.RegForm.CellNumber)
</div>
<label id="labelMessage_cell" class="text-danger" style="display:none">This field is required</label>
</div>
<script type="text/javascript" src="~/Content/dist/js/jquery.validate.unobtrusive.min.js"></script>
<!--Handling form-validation when empty-->
<script type='text/javascript'>
$(function () {
//When the blur event occurs from your Textbox (you lose focus)
$('#textEmail').blur(function () {
var email = document.getElementById("textEmail").value;
var expr = /[a-z0-9._%+-]+[a-z0-9.-]+\.[a-z]{2,}$/;
if (!expr.test(email)) {
document.getElementById("labelMessage_email").style.display = "inline";
}
else {
document.getElementById("labelMessage_email").style.display = "none";
}
});
});
// Error message for cell-phone.
$(function () {
$('#textCellNumber').blur(function () {
var cell = document.getElementById("textCellNumber").value;
var expr = /[a-z0-9._%+-]+[a-z0-9.-]+\.[a-z]{2,}$/;
if (!expr.test(cell)) {
document.getElementById("labelMessage_cell").style.display = "inline";
} else {
document.getElementById("labelMessage_cell").style.display = "none";
}
});
});
// Error message for ZipCode.
$(function () {
$('#textZipCode').blur(function () {
var zipcode = document.getElementById("textZipCode").value;
var expr = /[a-z0-9._%+-]+[a-z0-9.-]+\.[a-z]{2,}$/;
if (!expr.test(zipcode)) {
document.getElementById("labelMessage_zip").style.display = "inline";
} else {
document.getElementById("labelMessage_zip").style.display = "none";
}
});
});
</script>
解决方案
使用这些库:
"~/Content/assets/js/jquery.validate.min.js"
"~/Content/assets/js/jquery.validate.unobtrusive.min.js"
并在您的模型中将属性上方的属性写为:
[Required]
public string Email { get; set; }
使用属性库:using System.ComponentModel.DataAnnotations
推荐阅读
- spring-boot - 进行混沌工程
- python - Catboost 默认超参数
- python - 在numpy数组中迭代的roundabout square方法
- angular - 使用 AWS Amplify & Cognito 调用 API 时安全令牌无效
- jquery - 如何重新设计引导滑块
- python - 在 Scrapy 中从数字中去除逗号
- kubernetes - 如何重新部署指标服务器
- python - Seaborn Multiaxis Graph 将不同颜色分配给相同/共享类别 Hue
- sql - 为给定用户选择每个帖子的 SO 信誉
- angular - 如何有效地将需要的值从数据库加载到角度组件?