内容简介:在提交数据时常常会在客户端进行一次友好的验证信息提示,常见的就是直接通过ModelValidation验证(这种方式最快最简单),还有些情况期望使用ajax异步方式处理以实现更多其他逻辑的处理。此篇文章主要描述在使用ajax和直接提交窗体--验证Model时如何正确进行验证信息的提示。这个比较简单,没什么好说的直接上代码
在提交数据时常常会在客户端进行一次友好的验证信息提示,常见的就是直接通过ModelValidation验证(这种方式最快最简单),还有些情况期望使用ajax异步方式处理以实现更多其他逻辑的处理。
此篇文章主要描述在使用ajax和直接提交窗体--验证Model时如何正确进行验证信息的提示。
一、通过ModelValidation的方式实现
这个比较简单,没什么好说的直接上代码
前端:
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<form>
<div class="form-group">
<label>Age</label>
<input class="form-control" asp-for="Age"/>
<span asp-validation-for="Age"></span>
</div>
<button type="submit" class="btn btn-primary">submit</button>
</form>
后端:
public class ValidModel
{
[Required(ErrorMessage ="必须填写")]
public long Age { get; set; }
}
这里的话就已经实现了验证(MVC的验证模型)。
二、通过ajax的方式实现
1. 通过jquery, jqueryValidate实现
前端:
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<form id="frmEdit">
<div class="form-group">
<label>Age</label>
<input class="form-control" asp-for="Age" title="必须填写" required/>
</div>
<button type="submit" class="btn btn-primary" id="btnSave">submit</button>
</form>
<script>
$(function () {
// for editFormOne
$("#btnSave").click(function () {
$("#frmEdit").validate({
submitHandler: function () {
//处理验证成功之后的逻辑
}
});
});
});
</script>
后端:
public class ValidModel
{
public long Age { get; set; }
}
由于采用了ajax的验证,所以这里后台Model不再使用required属性,
前端这里也不需要引用jquery.validate.unobtrusive.js。
2 . 异常引用:jquery.validate,jquery, jquery.validate.unobtrusive并且采用asp-for
标记时就会出现:
对于Model的绑定属性是 值类型 时:
MVC会自动触发required属性的标签生成:data-val="true" data-val-required="The Age field is required."
这个属性会直接影响到jqueryvalidate的验证的处理结果,就是没有提示消息出来。
对于这个问题以下两种解决方案供参考
第一种在标签上不使用asp-for属性,而是直接静态方式name='xxx'.
前端:
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<form id="frmEdit">
<div class="form-group">
<label>Age</label>
<input class="form-control" name="Age" title="必填项" required />
</div>
<button type="submit" class="btn btn-primary" id="btnSave">submit</button>
</form>
<script>
$(function () {
// for editFormOne
$("#btnSave").click(function () {
$("#frmEdit").validate({
submitHandler: function () {
//处理验证成功之后的逻辑
}
});
});
});
</script>
后端:
public class ValidModel
{
public long Age { get; set; }
}
第二种使用asp-for属性,对应的Model的话需要调整值类型为:可以null的类型, Nullable<T>或者T?的类型,这样的话就会默认过滤掉
required属性生成的标签data*,避免了和jquery.validate.unobtrusive的冲突.
前端:
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<form id="frmEdit">
<div class="form-group">
<label>Age</label>
<input class="form-control" asp-for="Age" title="必填项" required />
</div>
<button type="submit" class="btn btn-primary" id="btnSave">submit</button>
</form>
<script>
$(function () {
// for editFormOne
$("#btnSave").click(function () {
$("#frmEdit").validate({
submitHandler: function () {
//处理验证成功之后的逻辑
}
});
});
});
</script>
后端:
public class ValidModel
{
public long? Age { get; set; } // public Nullable<long> Age {get;set;} 一样的
}
参考链接
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
推荐系统与深度学习
黄昕、赵伟、王本友、吕慧伟、杨敏 / 清华大学出版社 / 2019-1-1 / 65.00元
本书的内容设置由浅入深,从传统的推荐算法过渡到近年兴起的深度学习技术。不管是初学者,还是有一定经验的从业人员,相信都能从本书的不同章节中有所收获。 区别于其他推荐算法书籍,本书引入了已被实践证明效果较好的深度学习推荐技术,包括Word2Vec、Wide & Deep、DeepFM、GAN 等技术应用,并给出了相关的实践代码;除了在算法层面讲解推荐系统的实现,还从工程层面详细阐述推荐系统如何搭建.一起来看看 《推荐系统与深度学习》 这本书的介绍吧!
HTML 编码/解码
HTML 编码/解码
RGB CMYK 转换工具
RGB CMYK 互转工具