Form 表单示例集

这里展示了各种实用的表单场景和最佳实践。

登录表单

经典的登录表单示例。

用户登录

记住我

忘记密码？

还没有账号？立即注册

<template>
  <ExForm ref="loginFormRef" :model="loginForm" :rules="loginRules">
    <ExFormItem prop="username">
      <input v-model="loginForm.username" placeholder="用户名" />
    </ExFormItem>
    
    <ExFormItem prop="password">
      <input v-model="loginForm.password" type="password" placeholder="密码" />
    </ExFormItem>
    
    <ExFormItem>
      <ExCheckbox v-model="loginForm.remember">记住我</ExCheckbox>
    </ExFormItem>
    
    <ExFormItem>
      <button @click="handleLogin">登录</button>
    </ExFormItem>
  </ExForm>
</template>

<script setup>
import { ref, reactive } from 'vue'

const loginFormRef = ref(null)
const loginForm = reactive({
  username: '',
  password: '',
  remember: false
})

const loginRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于 6 位', trigger: 'blur' }
  ]
}

const handleLogin = async () => {
  const result = await loginFormRef.value?.validate()
  if (result.valid) {
    console.log('登录', loginForm)
  }
}
</script>

注册表单

包含多种验证规则的注册表单。

用户注册

用户名 :

邮箱 :

手机号 :

密码 :

确认密码 :

我已阅读并同意《用户协议》和《隐私政策》

<template>
  <ExForm ref="registerFormRef" :model="registerForm" :rules="registerRules" label-width="100px">
    <ExFormItem label="用户名" prop="username">
      <input v-model="registerForm.username" placeholder="请输入用户名" />
    </ExFormItem>
    
    <ExFormItem label="邮箱" prop="email">
      <input v-model="registerForm.email" type="email" placeholder="请输入邮箱" />
    </ExFormItem>
    
    <ExFormItem label="手机号" prop="phone">
      <input v-model="registerForm.phone" placeholder="请输入手机号" />
    </ExFormItem>
    
    <ExFormItem label="密码" prop="password">
      <input v-model="registerForm.password" type="password" placeholder="请输入密码" />
    </ExFormItem>
    
    <ExFormItem label="确认密码" prop="confirmPassword">
      <input v-model="registerForm.confirmPassword" type="password" placeholder="请再次输入密码" />
    </ExFormItem>
    
    <ExFormItem prop="agree">
      <ExCheckbox v-model="registerForm.agree">
        我已阅读并同意用户协议
      </ExCheckbox>
    </ExFormItem>
    
    <ExFormItem>
      <button @click="handleRegister">注册</button>
    </ExFormItem>
  </ExForm>
</template>

搜索表单

内联布局的搜索表单。

关键词 :

分类 :

选择分类

状态 :

选择状态

<template>
  <ExForm :model="searchForm" layout="inline">
    <ExFormItem label="关键词">
      <input v-model="searchForm.keyword" placeholder="搜索..." />
    </ExFormItem>
    
    <ExFormItem label="分类">
      <ExSelect v-model="searchForm.category" placeholder="选择分类">
        <option value="">全部</option>
        <option value="tech">技术</option>
        <option value="design">设计</option>
      </ExSelect>
    </ExFormItem>
    
    <ExFormItem>
      <button @click="handleSearch">搜索</button>
      <button @click="handleReset">重置</button>
    </ExFormItem>
  </ExForm>
</template>

设置表单

分组的设置表单。

通知设置

邮件通知 :

短信通知 :

推送通知 :

隐私设置

公开资料 :

显示邮箱 :

显示手机 :

偏好设置

主题 :

浅色

深色

自动

语言 :

<template>
  <ExForm :model="settingsForm" label-width="120px">
    <h4>通知设置</h4>
    <ExFormItem label="邮件通知">
      <ExSwitch v-model="settingsForm.notifications.email" />
    </ExFormItem>
    
    <h4>隐私设置</h4>
    <ExFormItem label="公开资料">
      <ExSwitch v-model="settingsForm.privacy.profileVisible" />
    </ExFormItem>
    
    <h4>偏好设置</h4>
    <ExFormItem label="主题">
      <ExRadioGroup v-model="settingsForm.theme">
        <ExRadio value="light">浅色</ExRadio>
        <ExRadio value="dark">深色</ExRadio>
      </ExRadioGroup>
    </ExFormItem>
    
    <ExFormItem>
      <button @click="handleSaveSettings">保存设置</button>
    </ExFormItem>
  </ExForm>
</template>