<template>
<view class="u-page">
<u-navbar
title="表单"
@leftClick="navigateBack"
safeAreaInsetTop
fixed
placeholder
></u-navbar>
<view class="u-demo-block">
<text class="u-demo-block__title">基础使用</text>
<view class="u-demo-block__content">
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
<u--form
labelPosition="left"
:model="model1"
ref="form1"
>
<u-form-item
label="姓名"
prop="userInfo.name"
borderBottom
ref="item1"
>
<u--input
v-model="model1.userInfo.name"
border="none"
placeholder="姓名,只能为中文"
></u--input>
</u-form-item>
<u-form-item
label="性别"
prop="userInfo.sex"
borderBottom
@click="showSex = true; hideKeyboard()"
ref="item1"
>
<u--input
v-model="model1.userInfo.sex"
disabled
disabledColor="#ffffff"
placeholder="请选择性别"
border="none"
></u--input>
<u-icon
slot="right"
name="arrow-right"
></u-icon>
</u-form-item>
<u-form-item
label="水果"
prop="radiovalue1"
borderBottom
ref="item2"
>
<u-radio-group v-model="model1.radiovalue1">
<u-radio
:customStyle="{marginRight: '16px'}"
v-for="(item, index) in radiolist1"
:key="index"
:label="item.name"
:name="item.name"
>
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item
label="兴趣爱好"
prop="checkboxValue1"
borderBottom
labelWidth="80"
ref="item3"
>
<u-checkbox-group
v-model="model1.checkboxValue1"
shape="square"
@change="change"
>
<u-checkbox
:customStyle="{marginRight: '16px'}"
v-for="(item, index) in checkboxList1"
:key="index"
:label="item.name"
:name="item.name"
>
</u-checkbox>
</u-checkbox-group>
</u-form-item>
<u-form-item
label="简介"
prop="intro"
borderBottom
ref="item3"
>
<u--textarea
placeholder="不低于3个字"
v-model="model1.intro"
count
></u--textarea>
</u-form-item>
<u-form-item
label="住店时间"
prop="hotel"
labelWidth="80"
borderBottom
@click="showCalendar = true; hideKeyboard()"
>
<u--input
v-model="model1.hotel"
disabled
disabledColor="#ffffff"
placeholder="请选择住店和离店时间"
border="none"
></u--input>
<u-icon
slot="right"
name="arrow-right"
></u-icon>
</u-form-item>
<u-form-item
label="验证码"
prop="code"
labelWidth="80"
borderBottom
>
<u--input
v-model="model1.code"
border="none"
placeholder="请填写验证码"
></u--input>
<u-button
slot="right"
@tap="getCode"
:text="tips"
type="success"
size="mini"
:disabled="disabled1"
></u-button>
</u-form-item>
<u-form-item
label="生日"
prop="userInfo.birthday"
borderBottom
@click="showBirthday = true; hideKeyboard()"
ref="item1"
>
<u--input
v-model="model1.userInfo.birthday"
disabled
disabledColor="#ffffff"
placeholder="请选择生日"
border="none"
></u--input>
<u-icon
slot="right"
name="arrow-right"
></u-icon>
</u-form-item>
</u--form>
<u-button
type="primary"
text="提交"
customStyle="margin-top: 50px"
@click="submit"
></u-button>
<u-button
type="error"
text="重置"
customStyle="margin-top: 10px"
@click="reset"
></u-button>
<u-action-sheet
:show="showSex"
:actions="actions"
title="请选择性别"
description="如果选择保密会报错"
@close="showSex = false"
@select="sexSelect"
>
</u-action-sheet>
<u-calendar
:show="showCalendar"
mode="range"
@confirm="calendarConfirm"
@close="calendarClose"
startText="住店"
endText="离店"
confirmDisabledText="请选择离店日期"
:formatter="formatter"
></u-calendar>
<u-code
ref="uCode"
@change="codeChange"
seconds="20"
@start="disabled1 = true"
@end="disabled1 = false"
></u-code>
<u-datetime-picker
:show="showBirthday"
:value="birthday"
mode="date"
closeOnClickOverlay
@confirm="birthdayConfirm"
@cancel="birthdayClose"
@close="birthdayClose"
></u-datetime-picker>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
fileList1: [],
disabled1: false,
tips: '',
value: '',
showCalendar: false,
showBirthday: false,
model1: {
userInfo: {
name: '楼兰',
sex: '',
birthday: ''
},
radiovalue1: '苹果',
checkboxValue1: [],
intro: '',
code: ''
},
showSex: false,
birthday: Number(new Date()),
actions: [{
name: '男',
},
{
name: '女',
},
{
name: '保密',
},
],
rules: {
'userInfo.name': [{
type: 'string',
required: true,
message: '请填写姓名',
trigger: ['blur', 'change']
}, {
// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
validator: (rule, value, callback) => {
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
return uni.$u.test.chinese(value);
},
message: "姓名必须为中文",
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
trigger: ["change", "blur"],
}],
code: {
type: 'string',
required: true,
len: 4,
message: '请填写4位验证码',
trigger: ['blur']
},
'userInfo.sex': {
type: 'string',
max: 1,
required: true,
message: '请选择男或女',
trigger: ['blur', 'change']
},
radiovalue1: {
type: 'string',
min: 1,
max: 2,
message: '橙子有毒',
trigger: ['change']
},
checkboxValue1: {
type: 'array',
min: 2,
required: true,
message: '不能太宅，至少选两项',
trigger: ['change']
},
intro: {
type: 'string',
min: 3,
required: true,
message: '不低于3个字',
trigger: ['change']
},
hotel: {
type: 'string',
min: 2,
required: true,
message: '请选择住店时间',
trigger: ['change']
},
'userInfo.birthday': {
type: 'string',
required: true,
message: '请选择生日',
trigger: ['change']
},
},
radiolist1: [{
name: '苹果',
disabled: false
},
{
name: '香蕉',
disabled: false
},
{
name: '毒橙子',
disabled: false
}
],
checkboxList1: [{
name: '羽毛球',
disabled: false
},
{
name: '跑步',
disabled: false
},
{
name: '爬山',
disabled: false
}
]
}
},
onReady() {
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
this.$refs.form1.setRules(this.rules)
},
methods: {
afterRead(event) {
this.fileList1.push({
url: event.file,
status: 'uploading',
message: '上传中'
})
},
groupChange(n) {
// console.log('groupChange', n);
},
radioChange(n) {
// console.log('radioChange', n);
},
navigateBack() {
uni.navigateBack()
},
sexSelect(e) {
this.model1.userInfo.sex = e.name
this.$refs.form1.validateField('userInfo.sex')
},
change(e) {
// console.log(e);
},
formatter(day) {
const d = new Date()
let month = d.getMonth() + 1
const date = d.getDate()
if (day.month == month && day.day == date + 3) {
day.bottomInfo = '有优惠'
day.dot = true
}
return day
},
calendarConfirm(e) {
this.showCalendar = false
this.model1.hotel = `${e[0]} / ${e[e.length - 1]}`
this.$refs.form1.validateField('hotel')
},
codeChange(text) {
this.tips = text;
},
getCode() {
if (this.$refs.uCode.canGetCode) {
// 模拟向后端请求验证码
uni.showLoading({
title: '正在获取验证码'
})
setTimeout(() => {
uni.hideLoading();
// 这里此提示会被this.start()方法中的提示覆盖
uni.$u.toast('验证码已发送');
// 通知验证码组件内部开始倒计时
this.$refs.uCode.start();
}, 2000);
} else {
uni.$u.toast('倒计时结束后再发送');
}
},
calendarClose() {
this.showCalendar = false
this.$refs.form1.validateField('hotel')
},
birthdayClose() {
this.showBirthday = false
this.$refs.form1.validateField('userInfo.birthday')
},
birthdayConfirm(e) {
this.showBirthday = false
this.model1.userInfo.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
this.$refs.form1.validateField('userInfo.birthday')
},
submit() {
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
this.$refs.form1.validate().then(res => {
uni.$u.toast('校验通过')
}).catch(errors => {
uni.$u.toast('校验失败')
})
},
reset() {
const validateList = ['userInfo.name', 'userInfo.sex', 'radiovalue1', 'checkboxValue1', 'intro',
'hotel', 'code', 'userInfo.birthday']
this.$refs.form1.resetFields()
this.$refs.form1.clearValidate()
setTimeout(()=>{
this.$refs.form1.clearValidate(validateList)
// 或者使用 this.$refs.form1.clearValidate()
},10)
},
hideKeyboard() {
uni.hideKeyboard()
}
},
}
</script>
<style lang="scss">
</style>