uni-forms

### uni-forms 组件的使用方法 `uni-forms` 是 `uni-app` 提供的一个增强型表单组件，支持双向绑定和复杂的校验功能。以下是关于其基本使用方法以及一些常见场景下的注意事项。 #### 基本使用 通过 `uni-forms` 的属性配置可以轻松实现表单的数据绑定与验证。核心属性包括： - **model**: 表单数据对象，用于存储表单字段值。 - **rules**: 验证规则，定义每个字段的校验逻辑[^2]。 下面是一个简单的例子展示如何初始化并使用 `uni-forms` 进行表单验证： ```vue <template> <view> <uni-forms :model="formData" :rules="formRules"> <!-- 输入框 --> <uni-forms-item name="username"> <uni-easyinput v-model="formData.username" placeholder="请输入用户名"></uni-easyinput> </uni-forms-item> <!-- 密码输入框 --> <uni-forms-item name="password"> <uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码"></uni-easyinput> </uni-forms-item> <!-- 提交按钮 --> <button @click="submitForm">提交</button> </uni-forms> </view> </template> <script> export default { data() { return { formData: { username: '', password: '' }, formRules: { username: { required: true, message: '用户名不能为空', trigger: ['blur'] }, password: { required: true, minLength: 6, message: '密码长度至少为6位', trigger: ['change'] } } }; }, methods: { submitForm() { this.$refs.uniForms.validate().then(res => { console.log('表单验证成功:', res); }).catch(err => { console.error('表单验证失败:', err); }); } } }; </script> ``` 上述代码展示了如何创建一个带有两个字段（用户名和密码）的简单表单，并为其设置了基础的校验规则[^1]。 #### 自定义校验函数 对于更复杂的需求，可以通过 `validateFunction` 定义自定义校验逻辑。需要注意的是，虽然文档建议优先使用内置的方式，但在某些特殊情况下可能需要结合两者来满足需求。 示例代码如下： ```javascript methods: { customValidate(data) { const errors = {}; if (data.age && typeof data.age !== 'number') { errors.age = '年龄必须是数字'; } return errors; }, async submitForm() { try { await this.$refs.uniForms.validate(this.customValidate.bind(this)); console.log('所有校验均通过'); } catch (err) { console.error('存在未通过的校验项:', err); } } } ``` 此部分实现了针对特定字段（如年龄）进行额外类型的检查[^3]。 #### 处理多级嵌套数据结构 当遇到较为复杂的模型时，比如包含数组或多层嵌套的对象，则需特别注意名称映射关系。确保每一层级路径都正确匹配到实际数据源上。 假设有一个这样的 JSON 数据结构 `{ user: { profile: { email: "" } } }`, 对应的 HTML 应该写成这样: ```html <uni-forms-item name="user.profile.email"> <uni-easyinput v-model="formData.user.profile.email" /> </uni-forms-item> ``` 同时也要调整相应的 rules 设置:`'user.profile.email': {...}`. --- ###