ASPNetCore MVC ModelValidation-ajax

一、通过ModelValidation的方式实现
这个比较简单,没什么好说的直接上代码

前端:

submit

后端:
public class ValidModel
{
[Required(ErrorMessage =“必须填写”)]
public long Age { get; set; }
}

这里的话就已经实现了验证(MVC的验证模型)。
 二、通过ajax的方式实现
 1. 通过jquery, jqueryValidate实现

前端:

submit

后端:
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’.

前端:

submit 后端: public class ValidModel { public long Age { get; set; } } 第二种使用asp-for属性,对应的Model的话需要调整值类型为:可以null的类型, Nullable或者T?的类型,这样的话就会默认过滤掉 required属性生成的标签data*,避免了和jquery.validate.unobtrusive的冲突.

前端:

submit

后端:
public class ValidModel
{
public long? Age { get; set; } // public Nullable Age {get;set;} 一样的
}
东莞网站建设www.zg886.cn

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在原始库的基础上增加多校验提示框支持。如下: <html> <head> <title>validation test</title> <style type="text/css"> .icon-ok { background: url(./images/icon-ok.png) no-repeat center; width: 16px; height: 16px; display: inline-block; } .icon-error { background: url(./images/icon-error.png) no-repeat center; width: 16px; height: 16px; display: inline-block; } .icon-indicator.field-validation-valid { background: url(./images/icon-ok.png) no-repeat center; width: 16px; height: 16px; display: inline-block; } .icon-indicator.field-validation-error { background: url(./images/icon-error.png) no-repeat center; width: 16px; height: 16px; display: inline-block; } .field-validation-error { font-size: small; color: #f00; } </style> <script src="./js/jquery.min.js"></script> <script src="./js/jquery.validate.js"></script> <script src="./js/jquery.validate.unobtrusive.js"></script> </head> <body> <form action="test.do" method="POST" novalidate="novalidate"> <div> <input type="text" id="name" name="name" placeholder="请输入名字!" data-val-required="请输入名字!" data-val="true"/> <span class="icon-indicator" data-valmsg-replace="false" data-valmsg-for="name"></span> <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="name"></span> </div> <div> <input type="text" id="mobile" name="mobile" placeholder="请输入手机!" data-val-required="请输入手机!" data-val="true"/> <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="mobile"></span> </div> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </form> </body> </html>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值