diff --git a/packages/console/src/components/TextInput/index.module.scss b/packages/console/src/components/TextInput/index.module.scss
index 034ad9391..07d94d6af 100644
--- a/packages/console/src/components/TextInput/index.module.scss
+++ b/packages/console/src/components/TextInput/index.module.scss
@@ -72,3 +72,9 @@
     }
   }
 }
+
+.errorMessage {
+  font: var(--font-body-medium);
+  color: var(--color-error);
+  margin-top: _.unit(1);
+}
diff --git a/packages/console/src/components/TextInput/index.tsx b/packages/console/src/components/TextInput/index.tsx
index 09c132fd8..5d09b15b0 100644
--- a/packages/console/src/components/TextInput/index.tsx
+++ b/packages/console/src/components/TextInput/index.tsx
@@ -5,27 +5,31 @@ import * as styles from './index.module.scss';
 
 type Props = HTMLProps<HTMLInputElement> & {
   hasError?: boolean;
+  errorMessage?: string;
   icon?: ReactNode;
 };
 
 const TextInput = (
-  { hasError = false, icon, disabled, className, readOnly, ...rest }: Props,
+  { hasError = false, errorMessage, icon, disabled, className, readOnly, ...rest }: Props,
   reference: ForwardedRef<HTMLInputElement>
 ) => {
   return (
-    <div
-      className={classNames(
-        styles.container,
-        hasError && styles.error,
-        icon && styles.withIcon,
-        disabled && styles.disabled,
-        readOnly && styles.readOnly,
-        className
-      )}
-    >
-      {icon && <span className={styles.icon}>{icon}</span>}
-      <input type="text" {...rest} ref={reference} disabled={disabled} readOnly={readOnly} />
-    </div>
+    <>
+      <div
+        className={classNames(
+          styles.container,
+          hasError && styles.error,
+          icon && styles.withIcon,
+          disabled && styles.disabled,
+          readOnly && styles.readOnly,
+          className
+        )}
+      >
+        {icon && <span className={styles.icon}>{icon}</span>}
+        <input type="text" {...rest} ref={reference} disabled={disabled} readOnly={readOnly} />
+      </div>
+      {hasError && errorMessage && <div className={styles.errorMessage}>{errorMessage}</div>}
+    </>
   );
 };
 
diff --git a/packages/console/src/pages/ApiResourceDetails/index.tsx b/packages/console/src/pages/ApiResourceDetails/index.tsx
index 69906d556..d6d2a5d13 100644
--- a/packages/console/src/pages/ApiResourceDetails/index.tsx
+++ b/packages/console/src/pages/ApiResourceDetails/index.tsx
@@ -46,7 +46,7 @@ const ApiResourceDetails = () => {
     handleSubmit,
     register,
     reset,
-    formState: { isSubmitting },
+    formState: { isSubmitting, errors },
   } = useForm<FormData>({
     defaultValues: data,
   });
@@ -152,7 +152,10 @@ const ApiResourceDetails = () => {
                   title="admin_console.api_resources.api_name"
                   className={styles.textField}
                 >
-                  <TextInput {...register('name', { required: true })} />
+                  <TextInput
+                    {...register('name', { required: true })}
+                    hasError={Boolean(errors.name)}
+                  />
                 </FormField>
                 <FormField
                   isRequired
@@ -161,6 +164,7 @@ const ApiResourceDetails = () => {
                 >
                   <TextInput
                     {...register('accessTokenTtl', { required: true, valueAsNumber: true })}
+                    hasError={Boolean(errors.accessTokenTtl)}
                   />
                 </FormField>
               </div>
diff --git a/packages/console/src/pages/ApplicationDetails/components/Settings.tsx b/packages/console/src/pages/ApplicationDetails/components/Settings.tsx
index fdbe7ae3f..f309f1347 100644
--- a/packages/console/src/pages/ApplicationDetails/components/Settings.tsx
+++ b/packages/console/src/pages/ApplicationDetails/components/Settings.tsx
@@ -18,7 +18,11 @@ type Props = {
 };
 
 const Settings = ({ oidcConfig }: Props) => {
-  const { control, register } = useFormContext<Application>();
+  const {
+    control,
+    register,
+    formState: { errors },
+  } = useFormContext<Application>();
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const uriPatternRules: MultiTextInputRule = {
@@ -35,7 +39,7 @@ const Settings = ({ oidcConfig }: Props) => {
         title="admin_console.application_details.application_name"
         className={styles.textField}
       >
-        <TextInput {...register('name', { required: true })} />
+        <TextInput {...register('name', { required: true })} hasError={Boolean(errors.name)} />
       </FormField>
       <FormField title="admin_console.application_details.description" className={styles.textField}>
         <TextInput {...register('description')} />
diff --git a/packages/console/src/pages/Applications/components/CreateForm/index.tsx b/packages/console/src/pages/Applications/components/CreateForm/index.tsx
index bc68ec605..ef232ca8f 100644
--- a/packages/console/src/pages/Applications/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Applications/components/CreateForm/index.tsx
@@ -121,7 +121,7 @@ const CreateForm = ({ onClose }: Props) => {
           )}
         </FormField>
         <FormField isRequired title="admin_console.applications.application_name">
-          <TextInput {...register('name', { required: true })} />
+          <TextInput {...register('name', { required: true })} hasError={Boolean(errors.name)} />
         </FormField>
         <FormField title="admin_console.applications.application_description">
           <TextInput {...register('description')} />
diff --git a/packages/console/src/pages/SignInExperience/components/BrandingForm.tsx b/packages/console/src/pages/SignInExperience/components/BrandingForm.tsx
index 5d7aedf02..5f7cbe2b7 100644
--- a/packages/console/src/pages/SignInExperience/components/BrandingForm.tsx
+++ b/packages/console/src/pages/SignInExperience/components/BrandingForm.tsx
@@ -8,13 +8,19 @@ import FormField from '@/components/FormField';
 import RadioGroup, { Radio } from '@/components/RadioGroup';
 import Switch from '@/components/Switch';
 import TextInput from '@/components/TextInput';
+import { uriValidator } from '@/utilities/validator';
 
 import { SignInExperienceForm } from '../types';
 import * as styles from './index.module.scss';
 
 const BrandingForm = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { watch, register, control } = useFormContext<SignInExperienceForm>();
+  const {
+    watch,
+    register,
+    control,
+    formState: { errors },
+  } = useFormContext<SignInExperienceForm>();
 
   const isDarkModeEnabled = watch('branding.isDarkModeEnabled');
   const style = watch('branding.style');
@@ -66,15 +72,47 @@ const BrandingForm = () => {
         />
       </FormField>
       <FormField isRequired title="admin_console.sign_in_exp.branding.logo_image_url">
-        <TextInput {...register('branding.logoUrl', { required: true })} />
+        <TextInput
+          {...register('branding.logoUrl', {
+            required: true,
+            validate: (value) => {
+              if (uriValidator({ verifyBlank: false })(value)) {
+                return true;
+              }
+
+              return t('errors.invalid_uri_format');
+            },
+          })}
+          hasError={Boolean(errors.branding?.logoUrl)}
+          errorMessage={errors.branding?.logoUrl?.message}
+        />
       </FormField>
       {isDarkModeEnabled && (
         <FormField title="admin_console.sign_in_exp.branding.dark_logo_image_url">
-          <TextInput {...register('branding.darkLogoUrl')} />
+          <TextInput
+            {...register('branding.darkLogoUrl', {
+              validate: (value) => {
+                if (!value) {
+                  return true;
+                }
+
+                if (uriValidator({ verifyBlank: false })(value)) {
+                  return true;
+                }
+
+                return t('errors.invalid_uri_format');
+              },
+            })}
+            hasError={Boolean(errors.branding?.darkLogoUrl)}
+            errorMessage={errors.branding?.darkLogoUrl?.message}
+          />
         </FormField>
       )}
       <FormField isRequired={isSloganRequired} title="admin_console.sign_in_exp.branding.slogan">
-        <TextInput {...register('branding.slogan', { required: isSloganRequired })} />
+        <TextInput
+          {...register('branding.slogan', { required: isSloganRequired })}
+          hasError={Boolean(isSloganRequired && errors.branding?.slogan)}
+        />
       </FormField>
     </>
   );
diff --git a/packages/console/src/pages/SignInExperience/components/TermsForm.tsx b/packages/console/src/pages/SignInExperience/components/TermsForm.tsx
index 3ebf9253d..64ec56235 100644
--- a/packages/console/src/pages/SignInExperience/components/TermsForm.tsx
+++ b/packages/console/src/pages/SignInExperience/components/TermsForm.tsx
@@ -11,7 +11,11 @@ import * as styles from './index.module.scss';
 
 const TermsForm = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { watch, register } = useFormContext<SignInExperienceForm>();
+  const {
+    watch,
+    register,
+    formState: { errors },
+  } = useFormContext<SignInExperienceForm>();
   const enabled = watch('termsOfUse.enabled');
 
   return (
@@ -28,7 +32,10 @@ const TermsForm = () => {
         title="admin_console.sign_in_exp.terms_of_use.terms_of_use"
         tooltip="admin_console.sign_in_exp.terms_of_use.terms_of_use_tip"
       >
-        <TextInput {...register('termsOfUse.contentUrl', { required: enabled })} />
+        <TextInput
+          {...register('termsOfUse.contentUrl', { required: enabled })}
+          hasError={Boolean(enabled && errors.termsOfUse)}
+        />
       </FormField>
     </>
   );
diff --git a/packages/console/src/pages/UserDetails/index.tsx b/packages/console/src/pages/UserDetails/index.tsx
index 543fe3865..77e9c37f3 100644
--- a/packages/console/src/pages/UserDetails/index.tsx
+++ b/packages/console/src/pages/UserDetails/index.tsx
@@ -28,6 +28,7 @@ import Reset from '@/icons/Reset';
 import * as detailsStyles from '@/scss/details.module.scss';
 import * as modalStyles from '@/scss/modal.module.scss';
 import { safeParseJson } from '@/utilities/json';
+import { uriValidator } from '@/utilities/validator';
 
 import CreateSuccess from './components/CreateSuccess';
 import DeleteForm from './components/DeleteForm';
@@ -60,7 +61,7 @@ const UserDetails = () => {
     register,
     control,
     reset,
-    formState: { isSubmitting },
+    formState: { isSubmitting, errors },
     getValues,
   } = useForm<FormData>();
 
@@ -221,7 +222,23 @@ const UserDetails = () => {
                   title="admin_console.user_details.field_avatar"
                   className={styles.textField}
                 >
-                  <TextInput {...register('avatar')} />
+                  <TextInput
+                    {...register('avatar', {
+                      validate: (value) => {
+                        if (!value) {
+                          return true;
+                        }
+
+                        if (uriValidator({ verifyBlank: true })(value)) {
+                          return true;
+                        }
+
+                        return t('errors.invalid_uri_format');
+                      },
+                    })}
+                    hasError={Boolean(errors.avatar)}
+                    errorMessage={errors.avatar?.message}
+                  />
                 </FormField>
                 <FormField
                   title="admin_console.user_details.field_roles"
diff --git a/packages/console/src/pages/Users/components/CreateForm/index.tsx b/packages/console/src/pages/Users/components/CreateForm/index.tsx
index b9b29e535..f807e91c8 100644
--- a/packages/console/src/pages/Users/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Users/components/CreateForm/index.tsx
@@ -1,6 +1,8 @@
 import { User } from '@logto/schemas';
+import { passwordRegEx, usernameRegEx } from '@logto/shared';
 import React from 'react';
 import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 
 import Button from '@/components/Button';
 import FormField from '@/components/FormField';
@@ -22,8 +24,10 @@ const CreateForm = ({ onClose }: Props) => {
   const {
     handleSubmit,
     register,
-    formState: { isSubmitting },
+    formState: { isSubmitting, errors },
   } = useForm<FormData>();
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
   const api = useApi();
 
   const onSubmit = handleSubmit(async (data) => {
@@ -53,13 +57,40 @@ const CreateForm = ({ onClose }: Props) => {
     >
       <form>
         <FormField isRequired title="admin_console.users.create_form_username">
-          <TextInput autoFocus {...register('username', { required: true })} />
+          <TextInput
+            autoFocus
+            {...register('username', {
+              required: true,
+              pattern: {
+                value: usernameRegEx,
+                message: t('errors.username_pattern_error'),
+              },
+            })}
+            hasError={Boolean(errors.username)}
+            errorMessage={errors.username?.message}
+          />
         </FormField>
         <FormField isRequired title="admin_console.users.create_form_name">
-          <TextInput {...register('name', { required: true })} />
+          <TextInput
+            {...register('name', {
+              required: true,
+            })}
+            hasError={Boolean(errors.name)}
+            errorMessage={errors.name?.message}
+          />
         </FormField>
         <FormField isRequired title="admin_console.users.create_form_password">
-          <TextInput {...register('password', { required: true })} />
+          <TextInput
+            {...register('password', {
+              required: true,
+              pattern: {
+                value: passwordRegEx,
+                message: t('errors.password_pattern_error'),
+              },
+            })}
+            hasError={Boolean(errors.password)}
+            errorMessage={errors.password?.message}
+          />
         </FormField>
       </form>
     </ModalLayout>
diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts
index bbd647cfa..cd382be48 100644
--- a/packages/phrases/src/locales/en.ts
+++ b/packages/phrases/src/locales/en.ts
@@ -121,6 +121,9 @@ const translation = {
       required_field_missing: 'Please enter {{field}}',
       required_field_missing_plural: 'You have to enter at least one {{field}}',
       more_details: 'More details',
+      username_pattern_error:
+        'Username should only contain letters, numbers, or underscore and should not start with a number.',
+      password_pattern_error: 'Password requires a minimum of 6 characters.',
     },
     tab_sections: {
       overview: 'Overview',
diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts
index 95dca1cf8..b38189098 100644
--- a/packages/phrases/src/locales/zh-cn.ts
+++ b/packages/phrases/src/locales/zh-cn.ts
@@ -121,6 +121,8 @@ const translation = {
       required_field_missing: '请输入{{field}}',
       required_field_missing_plural: '{{field}}不能全部为空',
       more_details: '查看详情',
+      username_pattern_error: '用户名只能包含英文字母、数字或下划线，且不以数字开头。',
+      password_pattern_error: '密码应不少于 6 位。',
     },
     tab_sections: {
       overview: '概览',