uni-forms标签

### uni-forms 标签使用方法 `uni-forms` 是 UniApp 提供的一个用于构建表单组件的标签，支持数据双向绑定以及多种校验功能。以下是关于 `uni-forms` 的属性、事件及其使用方法的具体说明。 #### 基本语法结构 ```html <uni-forms ref="form" :modelValue="formData" validateTrigger="bind"> <uni-forms-item label="用户名" name="username"> <input v-model.trim="formData.username" @blur="binddata('username', $event.detail.value)" /> </uni-forms-item> </uni-forms> ``` --- #### 主要属性详解 | 属性名称 | 类型 | 默认值 | 描述 | |------------------|------------|------------|------------------------------------------------------------------------------------------| | **ref** | String | —— | 表单实例引用名，通常设置为 `"form"`，以便通过 JavaScript 调用其 API 方法[^1] | | **modelValue** | Object | {} | 绑定的数据对象，存储表单项的初始值和更新后的值 | | **validateTrigger** | String/Array | 'submit' | 设置触发校验的方式，可选值有 `'change'`, `'blur'`, 或者两者组成的数组 | 当需要实现即时校验时，应将该属性设为 `"bind"` 并配合输入框中的 `@blur` 事件完成动态验证逻辑。 --- #### 自定义校验规则配置 可以通过 `rules` 定义全局或局部的校验规则： ```javascript const rules = { username: [ { required: true, message: '请输入用户名!' }, { min: 3, max: 8, message: '长度应在 3 到 8 之间!' } ] }; export default { data() { return { formData: {}, rules, }; }, }; ``` 在模板部分需指定这些规则应用到哪个字段上： ```html <uni-forms ref="form" :modelValue="formData" :rules="rules" validateTrigger="bind"> <!-- ... --> </uni-forms> ``` --- #### 实现 binddata 函数 为了使手动赋值生效并同步至模型层，在 input 中加入如下处理函数： ```javascript methods: { binddata(field, value) { this.formData[field] = value; } } ``` 此操作确保每次失去焦点后都能及时刷新对应键位的内容。 --- #### 示例代码展示 下面给出完整的案例演示如何正确运用上述知识点创建带即时反馈机制的小程序注册页面。 ```vue <template> <view class="container"> <uni-forms ref="form" :modelValue="formData" :rules="rules" validateTrigger="bind"> <uni-forms-item label="邮箱地址" name="email"> <input type="text" v-model.trim="formData.email" @blur="binddata('email', $event.detail.value)" placeholder="[email protected]"/> </uni-forms-item> <uni-forms-item label="密码强度" name="password"> <input type="password" v-model.trim="formData.password" @blur="binddata('password', $event.detail.value)" placeholder="至少六位字符"/> </uni-forms-item> <button type="primary" @click="handleSubmit">提交</button> </uni-forms> </view> </template> <script> import { defineComponent } from 'vue'; export default defineComponent({ data() { const rules = { email: [{ required: true, format: 'email', message: '请输入有效的电子邮件!', }], password: [{ required: true, minlength: 6, message: '密码太短，请重新填写!'}], }; return { formData: {}, rules, }; }, methods: { handleSubmit() { this.$refs.form.validate().then(res => { console.log('成功:', res); }).catch(err => { console.error('失败:', err); }); }, binddata(field, value) { this.formData[field] = value; } } }); </script> ``` ---