fix: enhance resource group name validation logic for spaces and special characters (#2916)

### This PR resolves [#2915](#2915) issue

Related PR: [control-panel#930](lablup/backend.ai-control-panel#930)

**Changes:**

Currently, validation rules are not applied in Backend.AI Core, but plan to add them to the scope of domain and project in the future. Therefore, �I added validation rules (allow dot and unicode) to match the rules on the core side.

**Invalid strings:**
- contains special characters
- consisting of leading, trailing, or only spaces, or more than one space between characters.
- empty string

**How to test:**
- Move to resources page and click resource group tab
- Create a new resource group and verify that the validation rule works correctly.

Author: ironAiken2

src/components/backend-ai-resource-group-list.ts

@@ -365,6 +365,14 @@ export default class BackendAIResourceGroupList extends BackendAIPage {
             valid: nativeValidity.valid,
             valueMissing: !nativeValidity.valid,
           };
+        } else if (nativeValidity.patternMismatch) {
+          this.resourceGroupNameInput.validationMessage = _text(
+            'resourceGroup.EnterValidResourceGroupName',
+          );
+          return {
+            valid: nativeValidity.valid,
+            patternMismatch: !nativeValidity.valid,
+          };
         } else {
           this.resourceGroupNameInput.validationMessage = _text(
             'resourceGroup.EnterValidResourceGroupName',
@@ -459,7 +467,8 @@ export default class BackendAIResourceGroupList extends BackendAIPage {
           this.notification.show(true, err);
         });
     } else {
-      // ResourceGroupNameEl.reportValidity();
+      this._validateResourceGroupName();
+      this.resourceGroupNameInput.reportValidity();
       return;
     }
   }
@@ -845,10 +854,10 @@ export default class BackendAIResourceGroupList extends BackendAIPage {
                   label="${_t('resourceGroup.ResourceGroupName')}"
                   maxLength="64"
                   placeholder="${_t('maxLength.64chars')}"
-                  validationMessage="${_t('data.explorer.ValueRequired')}"
                   required
                   autoValidate
-                  @change="${() => this._validateResourceGroupName()}"
+                  pattern="^[\\p{L}\\p{N}]+(?:[\\-_.][\\p{L}\\p{N}]+)*$"
+                  @input="${() => this._validateResourceGroupName()}"
                 ></mwc-textfield>
               `
             : html`