diff --git a/web/src/components/UpdateAccountDialog.tsx b/web/src/components/UpdateAccountDialog.tsx
index a7c29132c..a9cdac5bf 100644
--- a/web/src/components/UpdateAccountDialog.tsx
+++ b/web/src/components/UpdateAccountDialog.tsx
@@ -6,6 +6,14 @@ import { userService } from "../services";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import toastHelper from "./Toast";
+import { validate, ValidatorConfig } from "../helpers/validator";
+
+const validateConfig: ValidatorConfig = {
+  minLength: 4,
+  maxLength: 320,
+  noSpace: true,
+  noChinese: true,
+};
 
 type Props = DialogProps;
 
@@ -63,6 +71,12 @@ const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
       return;
     }
 
+    const usernameValidResult = validate(state.username, validateConfig);
+    if (!usernameValidResult.result) {
+      toastHelper.error(t("common.username") + ": " + usernameValidResult.reason);
+      return;
+    }
+
     try {
       const user = userService.getState().user as User;
       const userPatch: UserPatch = {