You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

355 lines
9.2 KiB

<template>
<view class="container">
<uni-card :is-shadow="false" is-full>
<text class="uni-h6">uni-forms 组件一般由输入框选择器单选框多选框等控件组成用以收集校验提交数据</text>
</uni-card>
<uni-section title="基本用法" type="line">
<view class="example">
<!-- 基础用法不包含校验规则 -->
<uni-forms ref="baseForm" :model="baseFormData" labelWidth="80px">
<uni-forms-item label="姓名" required>
<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item label="年龄" required>
<uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" />
</uni-forms-item>
<uni-forms-item label="性别" required>
<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
</uni-forms-item>
<uni-forms-item label="兴趣爱好" required>
<uni-data-checkbox v-model="baseFormData.hobby" multiple :localdata="hobbys" />
</uni-forms-item>
<uni-forms-item label="自我介绍">
<uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入自我介绍" />
</uni-forms-item>
<uni-forms-item label="日期时间">
<uni-datetime-picker type="datetime" return-type="timestamp"
v-model="baseFormData.datetimesingle" />
</uni-forms-item>
<uni-forms-item label="选择城市">
<uni-data-picker v-model="baseFormData.city" :localdata="cityData" popup-title="选择城市">
</uni-data-picker>
</uni-forms-item>
<uni-forms-item label="选择技能">
<uni-data-select v-model="baseFormData.skills" :localdata="skillsRange" >
</uni-data-select>
</uni-forms-item>
</uni-forms>
</view>
</uni-section>
<uni-section title="对齐方式" type="line">
<view class="example">
<view class="segmented-control">
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"
styleType="button">
</uni-segmented-control>
</view>
<!-- 展示不同的排列方式 -->
<uni-forms ref="baseForm" :modelValue="alignmentFormData" :label-position="alignment">
<uni-forms-item label="姓名" required>
<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item label="年龄" required>
<uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" />
</uni-forms-item>
</uni-forms>
</view>
</uni-section>
<uni-section title="表单校验" type="line">
<view class="example">
<!-- 基础表单校验 -->
<uni-forms ref="valiForm" :rules="rules" :model="valiFormData" labelWidth="80px">
<uni-forms-item label="姓名" required name="name">
<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item label="年龄" required name="age">
<uni-easyinput v-model="valiFormData.age" placeholder="请输入年龄" />
</uni-forms-item>
<uni-forms-item label="自我介绍">
<uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入自我介绍" />
</uni-forms-item>
</uni-forms>
<button type="primary" @click="submit('valiForm')">提交</button>
</view>
</uni-section>
<uni-section title="自定义校验规则" type="line">
<view class="example">
<!-- 自定义表单校验 -->
<uni-forms ref="customForm" :rules="customRules" labelWidth="80px" :modelValue="customFormData">
<uni-forms-item label="姓名" required name="name">
<uni-easyinput v-model="customFormData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item label="年龄" required name="age">
<uni-easyinput v-model="customFormData.age" placeholder="请输入年龄" />
</uni-forms-item>
<uni-forms-item label="兴趣爱好" required name="hobby">
<uni-data-checkbox v-model="customFormData.hobby" multiple :localdata="hobbys" />
</uni-forms-item>
</uni-forms>
<button type="primary" @click="submit('customForm')">提交</button>
</view>
</uni-section>
<uni-section title="动态表单" type="line">
<view class="example">
<!-- 动态表单校验 -->
<uni-forms ref="dynamicForm" :rules="dynamicRules" :model="dynamicFormData" labelWidth="80px">
<uni-forms-item label="邮箱" required name="email">
<uni-easyinput v-model="dynamicFormData.email" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item v-for="(item,index) in dynamicFormData.domains" :key="item.id"
:label="item.label+' '+index" required :rules="item.rules" :name="['domains',index,'value']">
<view class="form-item">
<uni-easyinput v-model="dynamicFormData.domains[index].value" placeholder="请输入域名" />
<button class="button" size="mini" type="default" @click="del(item.id)">删除</button>
</view>
</uni-forms-item>
</uni-forms>
<view class="button-group">
<button type="primary" size="mini" @click="add">新增域名</button>
<button type="primary" size="mini" @click="submit('dynamicForm')">提交</button>
</view>
</view>
</uni-section>
</view>
</template>
<script>
export default {
data() {
return {
// 基础表单数据
baseFormData: {
name: '',
age: '',
introduction: '',
sex: 2,
hobby: [5],
datetimesingle: 1627529992399,
city: '',
skills: 0
},
// 城市数据
cityData: [{
text: "北京",
value: "10001",
}, {
text: "上海",
value: "10002",
}, {
text: "深圳",
value: "10004",
}],
skillsRange: [{
value: 0,
text: "编程"
},
{
value: 1,
text: "绘画"
},
{
value: 2,
text: "运动"
},
],
// 表单数据
alignmentFormData: {
name: '',
age: '',
},
// 单选数据源
sexs: [{
text: '男',
value: 0
}, {
text: '女',
value: 1
}, {
text: '保密',
value: 2
}],
// 多选数据源
hobbys: [{
text: '跑步',
value: 0
}, {
text: '游泳',
value: 1
}, {
text: '绘画',
value: 2
}, {
text: '足球',
value: 3
}, {
text: '篮球',
value: 4
}, {
text: '其他',
value: 5
}],
// 分段器数据
current: 0,
items: ['左对齐', '顶部对齐'],
// 校验表单数据
valiFormData: {
name: '',
age: '',
introduction: '',
},
// 校验规则
rules: {
name: {
rules: [{
required: true,
errorMessage: '姓名不能为空'
}]
},
age: {
rules: [{
required: true,
errorMessage: '年龄不能为空'
}, {
format: 'number',
errorMessage: '年龄只能输入数字'
}]
}
},
// 自定义表单数据
customFormData: {
name: '',
age: '',
hobby: []
},
// 自定义表单校验规则
customRules: {
name: {
rules: [{
required: true,
errorMessage: '姓名不能为空'
}]
},
age: {
rules: [{
required: true,
errorMessage: '年龄不能为空'
}]
},
hobby: {
rules: [{
format: 'array'
},
{
validateFunction: function(rule, value, data, callback) {
if (value.length < 2) {
callback('请至少勾选两个兴趣爱好')
}
return true
}
}
]
}
},
dynamicFormData: {
email: '',
domains: []
},
dynamicLists: [],
dynamicRules: {
email: {
rules: [{
required: true,
errorMessage: '域名不能为空'
}, {
format: 'email',
errorMessage: '域名格式错误'
}]
}
}
}
},
computed: {
// 处理表单排列切换
alignment() {
if (this.current === 0) return 'left'
if (this.current === 1) return 'top'
return 'left'
}
},
onLoad() {},
onReady() {
// 设置自定义表单校验规则,必须在节点渲染完毕后执行
this.$refs.customForm.setRules(this.customRules)
},
methods: {
onClickItem(e) {
console.log(e);
this.current = e.currentIndex
},
add() {
this.dynamicFormData.domains.push({
label: '域名',
value: '',
rules: [{
'required': true,
errorMessage: '域名项必填'
}],
id: Date.now()
})
},
del(id) {
let index = this.dynamicLists.findIndex(v => v.id === id)
this.dynamicLists.splice(index, 1)
},
submit(ref) {
console.log(this.baseFormData);
this.$refs[ref].validate().then(res => {
console.log('success', res);
uni.showToast({
title: `校验通过`
})
}).catch(err => {
console.log('err', err);
})
},
}
}
</script>
<style lang="scss">
.example {
padding: 15px;
background-color: #fff;
}
.segmented-control {
margin-bottom: 15px;
}
.button-group {
margin-top: 15px;
display: flex;
justify-content: space-around;
}
.form-item {
display: flex;
align-items: center;
flex: 1;
}
.button {
display: flex;
align-items: center;
height: 35px;
line-height: 35px;
margin-left: 10px;
}
</style>