Uniapp 表单开发：input 输入、单选 / 多选、表单验证

本文将详细讲解 Uniapp 中的表单开发，涵盖输入框、单选/多选控件实现及表单验证，并附完整案例。所有示例均基于 Vue 语法。

---

一、基础表单组件

1. 输入框 (input)
   使用 uni-easyinput 组件实现：

   <uni-forms-item label="用户名" name="username">
     <uni-easyinput v-model="formData.username" placeholder="请输入" />
   </uni-forms-item>
   

2. 单选控件 (radio)
   使用 uni-data-checkbox 实现单选：

   <uni-forms-item label="性别" name="gender">
     <uni-data-checkbox v-model="formData.gender" :localdata="genders" />
   </uni-forms-item>
   

   data() {
     return {
       genders: [
         { text: '男', value: 1 },
         { text: '女', value: 2 }
       ]
     }
   }
   

3. 多选控件 (checkbox)
   使用 uni-data-checkbox 的 multiple 模式：

   <uni-forms-item label="兴趣" name="hobbies">
     <uni-data-checkbox multiple v-model="formData.hobbies" :localdata="hobbyList" />
   </uni-forms-item>
   

   hobbyList: [
     { text: '游泳', value: 'swim' },
     { text: '篮球', value: 'basketball' }
   ]
   

---

二、表单验证实现

通过 uni-forms 的 rules 属性实现验证：

<uni-forms ref="formRef" :rules="rules" :modelValue="formData">
  <!-- 表单项 -->
</uni-forms>

export default {
  data() {
    return {
      rules: {
        username: {
          rules: [
            { required: true, errorMessage: '用户名不能为空' },
            { minLength: 3, errorMessage: '长度至少3个字符' }
          ]
        },
        gender: {
          rules: [{ required: true, errorMessage: '请选择性别' }]
        },
        hobbies: {
          rules: [{ required: true, errorMessage: '请至少选择一项兴趣' }]
        }
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate().then(res => {
        uni.showToast({ title: '验证通过' })
      }).catch(err => {
        console.log('验证失败：', err)
      })
    }
  }
}

---

三、完整案例

<template>
  <view class="container">
    <uni-forms ref="formRef" :modelValue="formData" :rules="rules">
      <!-- 用户名 -->
      <uni-forms-item label="用户名" name="username">
        <uni-easyinput v-model="formData.username" placeholder="请输入用户名" />
      </uni-forms-item>

      <!-- 性别单选 -->
      <uni-forms-item label="性别" name="gender">
        <uni-data-checkbox v-model="formData.gender" :localdata="genders" />
      </uni-forms-item>

      <!-- 兴趣多选 -->
      <uni-forms-item label="兴趣" name="hobbies">
        <uni-data-checkbox multiple v-model="formData.hobbies" :localdata="hobbyList" />
      </uni-forms-item>

      <button @click="submitForm">提交</button>
    </uni-forms>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        gender: null,
        hobbies: []
      },
      genders: [
        { text: '男', value: 1 },
        { text: '女', value: 2 }
      ],
      hobbyList: [
        { text: '游泳', value: 'swim' },
        { text: '篮球', value: 'basketball' },
        { text: '阅读', value: 'reading' }
      ],
      rules: {
        username: {
          rules: [
            { required: true, errorMessage: '必填项' },
            { minLength: 3, errorMessage: '长度至少3字符' }
          ]
        },
        gender: { rules: [{ required: true, errorMessage: '请选择性别' }] },
        hobbies: { rules: [{ required: true, errorMessage: '请选择兴趣' }] }
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate().then(res => {
        uni.showToast({ title: '提交成功！' })
        console.log('表单数据：', this.formData)
      }).catch(err => {
        uni.showToast({ title: '验证失败', icon: 'error' })
      })
    }
  }
}
</script>

---

四、关键注意事项

1. 组件依赖
   需安装官方扩展组件：

   npm install @dcloudio/uni-ui
   

2. 数据绑定
   使用 v-model 实现双向绑定，多选时值自动转为数组

3. 验证触发
   可通过 validateTrigger 属性设置触发方式（默认为 submit 和 blur）

4. 自定义验证
   支持自定义验证函数：

   rules: {
     username: {
       rules: [{
         validate: (value) => value.includes('admin'),
         errorMessage: '不能包含敏感词'
       }]
     }
   }
   

提示：实际开发中可通过 uni.$on()/uni.$emit() 实现跨组件表单通信，复杂表单建议使用 Vuex 管理状态。