## Forms 表单
> **组件名:uni-forms**
> 代码块: `uForms`、`uni-forms-item`
> 关联组件:`uni-forms-item`、`uni-easyinput`、`uni-data-checkbox`、`uni-group`。
uni-app的内置组件已经有了 `<form>`组件,用于提交表单内容。
然而几乎每个表单都需要做表单验证,为了方便做表单验证,减少重复开发,`uni ui` 又基于 `<form>`组件封装了 `<uni-forms>`组件,内置了表单验证功能。
`<uni-forms>` 提供了 `rules`属性来描述校验规则、`<uni-forms-item>`子组件来包裹具体的表单项,以及给原生或三方组件提供了 `binddata()` 来设置表单值。
每个要校验的表单项,不管input还是checkbox,都必须放在`<uni-forms-item>`组件中,且一个`<uni-forms-item>`组件只能放置一个表单项。
`<uni-forms-item>`组件内部预留了显示error message的区域,默认是在表单项的底部。
另外,`<uni-forms>`组件下面的各个表单项,可以通过`<uni-group>`包裹为不同的分组。同一`<uni-group>`下的不同表单项目将聚拢在一起,同其他group保持垂直间距。`<uni-group>`仅影响视觉效果。
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ,请自行手动安装
> - `resetFields` 方法不会重置原生组件和三方组件的值
> - 如果配置 `validateTrigger` 属性为 `bind` 且表单域组件使用 `input` 事件触发会耗损部分性能,请谨慎使用
> - 组件支持 nvue ,需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"`
> - uni-forms 中不包含其他表单组件,如需使用 uni-easyinput、uni-data-checkbox 等组件,需要自行引入
> - 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
`uni-forms` 组件通常用来做表单校验和提交。每一个 `uni-forms-item` 是它的一个表单域组件,用来承载表单具体内容,`uni-forms-item` 中可以嵌套 `uni-easyinput`、`uni-data-checkbox` 和 uni-app内置的表单组件 ,不过 uni-app 的内置表单组件需要通过 `binddata` 或者 `uni-forms` 提供的 `setValue` 方法,将内容与 `uni-forms` 关联,才可完成表单的校验与提交(详见后文`表单校验` 部分)
```html
<template>
<view class="">
<uni-forms :modelValue="formData">
<uni-forms-item label="姓名" name="name">
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item required name="hobby" label="兴趣爱好">
<uni-data-checkbox multiple v-model="formData.hobby" :localdata="hobby"/>
</uni-forms-item>
</uni-forms>
<button @click="submitForm">Submit</button>
</view>
</template>
```
### 对齐方式
使用 `label-position` 属性可以设置所有表单域的位置,默认在左侧
```html
<template>
<view class="">
<uni-forms :modelValue="formData" label-position="top">
<uni-forms-item label="姓名" name="name">
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item required name="hobby" label="兴趣爱好">
<uni-data-checkbox multiple v-model="formData.hobby" :localdata="hobby"/>
</uni-forms-item>
</uni-forms>
</view>
</template>
```
## 表单校验
表单校验还可以直接通过 `uniCloud web 控制台` 快速根据 `schema` 自动生成表单维护界面,比如新建页面和编辑页面,自动处理校验规则,更多参考[DB Schema](https://uniapp.dcloud.io/uniCloud/schema)
### 如何使用
1. `uni-forms` 需要通过 `rules` 属性传入约定的校验规则,详细描述下文`校验规则说明`。
```html
<!-- rules 内容详见下方完整示例 -->
<uni-forms ref="form" :rules="rules">
...
</uni-forms>
```
2. `uni-forms` 需要绑定`modelValue`属性,值为表单的key\value 组成的对象。
```html
<!-- formData、rules 内容详见下方完整示例 -->
<uni-forms ref="form" :modelValue="formData" :rules="rules">
...
</uni-forms>
```
3. `uni-forms-item` 需要设置 `name` 属性为当前字段名,字段为 `String` 类型而非变量。
```html
<!-- formData、rules 内容详见下方完整示例 -->
<uni-forms :modelValue="formData" :rules="rules">
<uni-forms-item label="姓名" name="name">
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item required name="hobby" label="兴趣爱好">
<uni-data-checkbox multiple v-model="formData.hobby" :localdata="hobby"/>
</uni-forms-item>
</uni-forms>
```
4. 如果使用`uni-easyinput` 和 `uni-data-checkbox` 等关联组件,只需绑定 v-model,无需其他操作。
5. 如果使用原生 input、checkbox 或三方组件等,只需要给组件绑定 `binddata` 方法即可触发表单校验,无需绑定事件到 `methods` 中,见下方完整示例。
6. `binddata('name',$event.detail.value,'form')"` 方法接受三个值,
- 第一个参数传入当前表单组件所在的 name,同当前父组件 `uni-forms-item` 绑定属性 `name` 的值
- 第二个参数传入需要校验的值,内置组件可以通过 `$event.detail.value` 获取到组件的返回值,自定义组件传入需要校验的值即可
- 第三个参数传入 `uni-forms` 组件绑定属性 `ref` 的值,通常在多表单的时候需要传入,用来区分表单,如页面中仅有一个 `uni-forms` 可忽略
7. 如果内置 `binddata` 方法无法满足需求,在当前页面的 `methods` 中复写此方法即可,复写此方法需要调用 `uni-forms` 的 `setValue` 来触发表单校验,见下方 `setValue`方法说明
**完整示例**
```html
<template>
<view>
<uni-forms ref="form" :modelValue="formData" :rules="rules">
<uni-forms-item label="姓名" name="name">
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item label="邮箱" name="email">
<input class="input" v-model="formData.email" type="text" placeholder="请输入用户名" @input="binddata('email',$event.detail.value)" />
</uni-forms-item>
</uni-forms>
<button @click="submit">Submit</button>
</view>
</template>
```
```javascript
export default {
data() {
return {
// 表单数据
formData: {
name: 'LiMing',
email: 'dcloud@email.com'
},
rules: {
// 对name字段进行必填验证
name: {
rules: [{
required: true,
errorMessage: '请输入姓名',
},
{
minLength: 3,
maxLength: 5,
errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
}
]
},
// 对email字段进行必填验证
email: {
rules: [{
format: 'email',
errorMessage: '请输入正确的邮箱地址',
}]
}
}
}
},
methods: {
/**
* 复写 binddata 方法,如果只是为了校验,无复杂自定义操作,可忽略此方法
* @param {String} name 字段名称
* @param {String} value 表单域的值
*/
// binddata(name,value){
// 通过 input 事件设置表单指定 name 的值
// this.$refs.form.setValue(name, value)
// },
// 触发提交表单
submit() {
this.$refs.form.validate().then(res=>{
console.log('表单数据信息:', res);
}).catch(err =>{
console.log('表单错误信息:
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传,可轻松复刻,拿到资料包后可轻松复现出一样的项目,本人系统开发经验充足(全领域),有任何使用问题欢迎随时与我联系,我会及时为您解惑,提供帮助。 【资源内容】:包含完整源码+工程文件+说明(如有)等。答辩评审平均分达到96分,放心下载使用!可轻松复现,设计报告也可借鉴此项目,该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的。 【提供帮助】:有任何使用问题欢迎随时与我联系,我会及时解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件(如有),项目工程可直接复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用。
资源推荐
资源详情
资源评论
收起资源包目录
基于uni-app、uView UI开发的用于表白的微信小程序项目.zip(毕设&课设&实训&大作业&竞赛&项目) (1460个子文件)
demox.apk 39.68MB
android_debug.apk 29.48MB
__UNI__3BD80C0__20220317100214.apk 19.83MB
__UNI__A69D1A6_cm.apk 17.56MB
__UNI__3BD80C0_cm.apk 15.74MB
apkurl 77B
uni-fab.vue.bak 8KB
certdata 122B
certdataios 168B
iconfont.css 79KB
view.css 55KB
view.css 55KB
view.css 55KB
style.css 36KB
style.css 36KB
uni.css 23KB
pdfh5.css 9KB
pdfh5.css 9KB
uni-nvue.css 2KB
.DS_Store 6KB
2.gif 9KB
2.gif 9KB
2.gif 9KB
1.gif 6KB
1.gif 6KB
1.gif 6KB
spacer.gif 43B
spacer.gif 43B
spacer.gif 43B
local.html 2KB
local.html 2KB
demox.html 807B
demox.html 807B
__uniappview.html 786B
__uniappview.html 786B
__uniappview.html 786B
index.html 400B
appleConfig.ini 227B
.ios.ins 12B
.roid.ins 9B
iOS_debug.ipa 18.75MB
demo-ios-V0.1.1.ipa 591KB
demo-ios-V0.1.1.ipa 591KB
bg2.jpg 170KB
bg2.jpg 170KB
bg2.jpg 170KB
bg3.jpg 162KB
bg3.jpg 162KB
bg3.jpg 162KB
bg.jpg 97KB
bg.jpg 97KB
bg.jpg 97KB
app-service.js 1.87MB
app-view.js 989KB
vendor.js 797KB
pdf.worker.js 770KB
pdf.worker.js 770KB
app-service.js 675KB
app-service.js 674KB
view.umd.min.js 366KB
view.umd.min.js 366KB
view.umd.min.js 366KB
pdf.js 337KB
pdf.js 337KB
app-view.js 334KB
app-view.js 333KB
__uniappquill.js 211KB
__uniappquill.js 211KB
__uniappquill.js 211KB
vendor.js 199KB
moment.js 147KB
area.js 122KB
face-detect.js 119KB
face-detect.js 119KB
watermark.js 118KB
watermark.js 118KB
camera.js 117KB
camera.js 117KB
jquery-1.11.3.min.js 94KB
jquery-1.11.3.min.js 94KB
pdfh5.js 58KB
pdfh5.js 58KB
u-album.js 53KB
u-transition.js 52KB
__uniappes6.js 51KB
__uniappes6.js 51KB
__uniappes6.js 51KB
particles.js 42KB
particles.js 42KB
particles.js 42KB
u-button.js 39KB
u-popup.js 38KB
async-validator.js 38KB
__uniappchooselocation.js 38KB
__uniappchooselocation.js 38KB
__uniappchooselocation.js 38KB
parser.js 35KB
u-steps-item.js 35KB
u-text.js 35KB
u-modal.js 35KB
共 1460 条
- 1
- 2
- 3
- 4
- 5
- 6
- 15
资源评论
热爱技术。
- 粉丝: 2438
- 资源: 7862
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 使用jstack -l pid > jstack.log排查问题
- MySQL的全量、增量备份脚本
- Java继承机制详解:构建可复用的代码架构
- 30N06G-TN3-T-VB一种N-Channel沟道TO252封装MOS管
- CSA2025-JAVA-A1
- 30N06L-CMD30N06L-VB一种N-Channel沟道TO252封装MOS管
- 数据库迁移测试策略:确保数据迁移的准确性与完整性
- STD16NF06T4-VB一种N-Channel沟道TO252封装MOS管
- unity的tilemap辅助工具,自带多种笔刷
- STC6602-VB一种2个N+P-Channel沟道SOT23-6封装MOS管
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功