标签：function jquery 验证 ASPNetCore public MVC ModelValidation validate Age

 在提交数据时常常会在客户端进行一次友好的验证信息提示，常见的就是直接通过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;} 一样的
    }

参考链接

Required验证属性
jquery-validation-unobtrusive
jqueryvalidation

标签：function,jquery,验证,ASPNetCore,public,MVC,ModelValidation,validate,Age
来源： https://blog.51cto.com/dream1135134786/2379612

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。