refactor: 重构客户端验证逻辑

Author: ArgoZhang

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -3468,7 +3468,7 @@
     "AvatarUploadTips7": "Verify that an example of using a picture box is used in the form",
     "AvatarUploadButtonText": "Submit",
     "AvatarUploadValidateTitle": "ValidateForm",
-    "AvatarUploadValidateIntro": "Place it in <code>ValidateForm</code> to integrate automatic data validation function. For details, please refer to <code>ValidateForm</code> component",
+    "AvatarUploadValidateIntro": "Place it in <code>ValidateForm</code> to integrate automatic data validation function. For details, please refer to <code>ValidateForm</code> component. In this example, the uploaded file extension is limited to <code>.png, .jpg, .jpeg</code>. An error message will be displayed when uploading other formats. The file size limit is <code>5M</code>. An error message will also be displayed when it exceeds",
     "AvatarUploadAcceptTitle": "Accept",
     "AvatarUploadAcceptIntro": "The component provides <code>Accept</code> property for upload file filtering, in this case the circular avatar box accepts both GIF and JPEG images, sets the <code>Accept='image/gif, image/jpeg'</code> and can be written as: <code>Accept='image/*'</code> if you don't restrict the format of the image. Whether this property is not secure or should be to file format validation using the <b>server-side authentication</b>",
     "UploadsWidth": "The width of the preview box",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -3468,7 +3468,7 @@
     "AvatarUploadTips7": "验证表单内使用头像框示例",
     "AvatarUploadButtonText": "提交",
     "AvatarUploadValidateTitle": "ValidateForm",
-    "AvatarUploadValidateIntro": "放置到 <code>ValidateForm</code> 内集成自动数据验证功能，详情可以参考 <code>ValidateForm</code> 组件",
+    "AvatarUploadValidateIntro": "放置到 <code>ValidateForm</code> 内集成自动数据验证功能，详情可以参考 <code>ValidateForm</code> 组件，本例中上传文件扩展名仅限制为 <code>.png, .jpg, .jpeg</code>，上传其他格式时会有错误提示，文件大小限制为 <code>5M</code> 超过时也会有错误提示显示",
     "AvatarUploadAcceptTitle": "Accept",
     "AvatarUploadAcceptIntro": "组件提供了 <code>Accept</code> 属性用于设置上传文件过滤功能，本例中圆形头像框接受 GIF 和 JPEG 两种图像，设置 <code>Accept='image/gif, image/jpeg'</code>，如果不限制图像的格式，可以写为：<code>Accept='image/*'</code>，该属性并不安全还是应该是使用 <b>服务器端验证</b> 进行文件格式验证",
     "UploadsWidth": "预览框宽度",

src/BootstrapBlazor/Components/Upload/AvatarUpload.razor

@@ -14,7 +14,7 @@
         }
         @foreach (var item in GetUploadFiles())
         {
-            <div class="@GetItemClassString(item)" id="@item.ValidateId" style="@ItemStyleString">
+            <div @key="item" class="@GetItemClassString(item)" id="@item.ValidateId" style="@ItemStyleString">
                 <Avatar Url="@item.PrevUrl" />
                 @if (!IsDisabled)
                 {
@@ -49,7 +49,7 @@
 
 @code {
     RenderFragment RenderAdd =>
-    @<div class="@ItemClassString" style="@ItemStyleString">
+    @<div id="@AddId" class="@GetItemClassString()" style="@ItemStyleString">
         <div class="@ActionClassString">
             <span class="upload-item-plus">
                 <i class="@AddIcon"></i>

src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs

@@ -78,19 +78,28 @@ public partial class AvatarUpload<TValue>
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
-    private string? GetItemClassString(UploadFile item) => CssBuilder.Default(ItemClassString)
-        .AddClass("is-valid", !IsDisabled && item.IsValid is true)
-        .AddClass("is-invalid", !IsDisabled && item.IsValid is false)
-        .AddClass("is-valid", !IsDisabled && item is { IsValid: null, Uploaded: true, Code: 0 })
-        .AddClass("is-invalid", !IsDisabled && item is { IsValid: null, Code: not 0 })
-        .Build();
-
-    private string? ItemClassString => CssBuilder.Default("upload-item")
+    private string? GetItemClassString(UploadFile? item = null) => CssBuilder.Default("upload-item")
         .AddClass("is-circle", IsCircle)
-        .AddClass("is-single", IsMultiple == false)
         .AddClass("disabled", IsDisabled)
+        .AddClass(GetValidStatus(item))
         .Build();
 
+    private string? GetValidStatus(UploadFile? item = null)
+    {
+        if (ValidateForm == null)
+        {
+            return null;
+        }
+
+        if (IsDisabled)
+        {
+            return null;
+        }
+
+        var state = item?.IsValid ?? IsValid;
+        return state is true ? "is-valid" : "is-invalid";
+    }
+
     /// <summary>
     /// 获得/设置 预览框 Style 属性
     /// </summary>
@@ -127,11 +136,11 @@ protected override void OnParametersSet()
         InvalidStatusIcon ??= IconTheme.GetIconByKey(ComponentIcons.AvatarUploadInvalidStatusIcon);
 
         // 头像上传时如果用户没有设置 OnChanged 回调，需要使用内置方法将文件头像转化未 Base64 格式用于预览
-        OnChange ??= new Func<UploadFile, Task>(async item =>
+        OnChange ??= async item =>
         {
             item.ValidateId = $"{Id}_{item.GetHashCode()}";
             await item.RequestBase64ImageFileAsync();
-        });
+        };
     }
 
     /// <summary>
@@ -141,12 +150,24 @@ protected override void OnParametersSet()
     protected override bool CheckCanUpload()
     {
         // 允许多上传
-        if (IsMultiple == true)
+        if (IsMultiple)
         {
-            return true;
+            return !MaxFileCount.HasValue || GetUploadFiles().Count < MaxFileCount;
         }
 
         // 只允许单个上传
         return UploadFiles.Count == 0;
     }
+
+    /// <summary>
+    /// 获得 数据验证客户端 ID
+    /// </summary>
+    /// <returns></returns>
+    protected override string? RetrieveId()
+    {
+        var files = GetUploadFiles();
+        return files.Count == 0 ? $"{Id}_new" : files[0].ValidateId;
+    }
+
+    private string? AddId => GetUploadFiles().Count == 0 ? $"{Id}_new" : null;
 }

src/BootstrapBlazor/Components/Upload/ButtonUpload.razor.cs

@@ -194,7 +194,7 @@ public partial class ButtonUpload<TValue>
         .Build();
 
     private string? GetItemClassString(UploadFile item) => CssBuilder.Default(ItemClassString)
-        .AddClass("is-valid", item.Uploaded && item.Code == 0)
+        .AddClass("is-valid", item is { Uploaded: true, Code: 0 })
         .AddClass("is-invalid", item.Code != 0)
         .Build();
 

src/BootstrapBlazor/Components/Upload/CardUpload.razor.cs

@@ -19,7 +19,6 @@ public partial class CardUpload<TValue>
         .AddClass("is-invalid", item.Code != 0)
         .Build();
     private string? ItemClassString => CssBuilder.Default("upload-item")
-        .AddClass("is-single", IsMultiple == false)
         .AddClass("disabled", IsDisabled)
         .Build();
 

src/BootstrapBlazor/Components/Upload/InputUpload.razor.scss

@@ -115,10 +115,6 @@
     cursor: pointer;
 }
 
-.upload .upload-body.is-avatar .upload-item.is-single {
-    margin: 0;
-}
-
 .upload .upload-body.is-avatar .upload-item.is-invalid {
     border-color: var(--bs-danger);
     border-style: solid;

src/BootstrapBlazor/Components/Upload/UploadBase.cs

@@ -122,22 +122,27 @@ public abstract class UploadBase<TValue> : ValidateBase<TValue>, IUpload
     }
 
     /// <summary>
-    /// <inheritdoc/>
+    /// User selects files callback method
     /// </summary>
     /// <param name="args"></param>
     /// <returns></returns>
     protected async Task OnFileChange(InputFileChangeEventArgs args)
     {
         UploadFiles.Clear();
         var fileCount = MaxFileCount ?? args.FileCount;
-        var items = args.GetMultipleFiles(fileCount).Select(f => new UploadFile()
+        var items = args.GetMultipleFiles(fileCount).Select(f =>
         {
-            OriginFileName = f.Name,
-            Size = f.Size,
-            File = f,
-            FileCount = args.FileCount,
-            Uploaded = false,
-            UpdateCallback = Update
+            var file = new UploadFile()
+            {
+                OriginFileName = f.Name,
+                Size = f.Size,
+                File = f,
+                FileCount = args.FileCount,
+                Uploaded = false,
+                UpdateCallback = Update
+            };
+            file.ValidateId = $"{Id}_{file.GetHashCode()}";
+            return file;
         }).ToList();
 
         foreach (var item in items)
@@ -170,7 +175,7 @@ protected async Task OnFileChange(InputFileChangeEventArgs args)
         }
         else if (ValueType == typeof(IBrowserFile))
         {
-            CurrentValue = (TValue)(object)items[0].File!;
+            CurrentValue = (TValue)items[0].File!;
         }
         else if (ValueType == typeof(string))
         {
@@ -269,7 +274,7 @@ public virtual void Reset()
     }
 
     /// <summary>
-    /// 显示/隐藏验证结果方法
+    /// <inheritdoc/>
     /// </summary>
     /// <param name="results"></param>
     public override void ToggleMessage(IEnumerable<ValidationResult> results)