• Asp.net core通过自定义特性实现双端数据验证的一些想法


    asp.net core集成了非常方便的数据绑定和数据校验机制,配合操作各种easy的vs,效率直接高到飞起。

    通过自定义验证特性(Custom Validation Attribute)可以实现对于数据校验规则的极大扩展。

    最近在写前后端自定义验证的时候,尝试换了一种思路,这里做简单记录:

    > 一般而言,我们在自定义一个验证特定的时候,会继承ValidationAttribute

    > 之后如果只 override bool IsValid(object value) 则仅实现后端校验,无法实现前端校验

    > 如果要实现前端校验,则步骤会更加复杂:

    >> 首先额外继承IClientModelValidator接口

    >> 实现 void AddValidation(ClientModelValidationContext context) 方法,并填充内容

    >> 还不算完,我们还得额外再补充jquery的前端校验方法:

    >>> $.validator.addMethod

    >>> $.validator.unobtrusive.adapters.add

    这是asp.net core 自定义特性实现双端校验的标配步骤,可以参考dudu站长的这篇文章:https://www.cnblogs.com/dudu/p/6812715.html

    一直感觉这些步骤相对繁琐,单独的后端校验和jquery前端校验都很简单,既然俩适配到一起这么麻烦为啥不分开写?

    首先自定义特性仅实现后端验证:

    public class SimpleTestAttribute : ValidationAttribute
        {
            private static readonly Regex _noSpaceRegex = new Regex(@"/^[0-9]*$/", RegexOptions.Compiled);
    
            public override bool IsValid(object value)
            {
                string stringValue = Convert.ToString(value, CultureInfo.CurrentCulture);
    
                if (string.IsNullOrEmpty(stringValue))
                {
                    return true;
                }
    
                return _noSpaceRegex.IsMatch(stringValue);
            }
        }

    然后model字段添加特性标签:

    [SimpleTest(ErrorMessage = "请输入大于0的数字")]
    public string validtest { get; set; }

    之后是视图层代码:

    <div class="form-group">
                    <label asp-for="validtest" class="control-label"></label>
                    <input asp-for="validtest" class="form-control simpletest"/> <!-- 注意 simpletest 写到class里 -->
                    <span asp-validation-for="validtest" class="text-danger"></span>
                </div>

    以及视图层jquery单独前端校验的脚本:

    @section Scripts {
        @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
        
        <script type="text/javascript">
            $(function () {
                $.validator.addMethod("simpletest", function (value, element) {
                    var score = /^[0-9]*$/;
                    return this.optional(element) || (score.test(value));
                }, "请输入大于0的数字");
            });
        </script>
    }

    最后是Controller实现:

            [HttpPost]
            public IActionResult Edit(EditModel model)
            {
                if (!ModelState.IsValid)
                {
                    return View(); // 显示后端校验提示信息
                }
                return RedirectToAction("Index");
            }

    自定义特性只校验后端,前端用原始jquery代码写就好,感觉这样思路反倒更清晰(?捂脸。。)

    欢迎各路大神赐教拍砖

    参考:https://www.cnblogs.com/dudu/p/6812715.html

    扩展阅读:https://www.cnblogs.com/weiweithe/p/5268654.html


  • 相关阅读:
    Java 接口
    Java 数据结构
    Java 包(package)
    一步步学习SPD2010--第四章节--创建和修改网页(9)--附上母版页
    一步步学习SPD2010--第四章节--创建和修改网页(8)--插入Web部件区域
    一步步学习SPD2010--第四章节--创建和修改网页(7)--创建ASP.NET页面
    一步步学习SPD2010--第四章节--创建和修改网页(6)--创建和修改列表表单页面
    一步步学习SPD2010--第四章节--创建和修改网页(5)--创建列表视图页面
    一步步学习SPD2010--第四章节--创建和修改网页(4)--修改列表视图页面
    一步步学习SPD2010--第四章节--创建和修改网页(3)--改变网站的首页
  • 原文地址:https://www.cnblogs.com/kenkao/p/14362660.html
Copyright © 2020-2023  润新知