<template>
<view class="edit-order-address-page">
<view class="billing-form-root">
<view class="form-title">
<text class="title-text">Billing Address</text>
<text class="title-select">Select from address book</text>
</view>
<uni-forms class="billing-form"
:rules="rules"
:value="addressForm"
label-position="top"
ref="_address_form"
validate-trigger="bind"
err-show-type="undertext"
>
<view class="billing-form-group">
<view class="form-label required">First Name</view>
<uni-forms-item name="firstname" required>
<uni-easyinput type="text" class="form-input" :clearable="false" v-model="addressForm.firstname"></uni-easyinput>
</uni-forms-item>
</view>
<view class="billing-form-group">
<view class="form-label required">Last Name</view>
<uni-forms-item name="lastname" required>
<uni-easyinput type="text" class="form-input" :clearable="false" v-model="addressForm.lastname"></uni-easyinput>
</uni-forms-item>
</view>
<view class="billing-form-group">
<view class="form-label required">Address<text class="form-label-tips">(No accepting PO.box)</text></view>
<uni-forms-item name="street" required>
<uni-easyinput type="textarea" class="form-input" :clearable="false" v-model="addressForm.street"></uni-easyinput>
</uni-forms-item>
</view>
<view class="billing-form-group">
<view class="form-label required">Zip/Postal Code</view>
<uni-forms-item name="postcode" required>
<uni-easyinput type="text" class="form-input" :clearable="false" v-model="addressForm.postcode"></uni-easyinput>
</uni-forms-item>
</view>
<view class="billing-form-group">
<view class="form-label required">City</view>
<uni-forms-item name="city" required>
<uni-easyinput type="text" class="form-input" :clearable="false" v-model="addressForm.city"></uni-easyinput>
</uni-forms-item>
</view>
<view class="billing-form-group">
<view class="form-label required">State/Province</view>
<uni-forms-item name="region" required>
<uni-easyinput type="text" class="form-input"
placeholder="Place Input region, state or province"
:clearable="false"
v-model="addressForm.region"
></uni-easyinput>
</uni-forms-item>
</view>
<view class="billing-form-group">
<view class="form-label required">Telephone</view>
<uni-forms-item name="telephone" required>
<uni-easyinput type="text" class="form-input" :clearable="false" v-model="addressForm.telephone"></uni-easyinput>
</uni-forms-item>
</view>
</uni-forms>
</view>
<!--底部提交按钮-->
<view class="order-address-bottom">
<view @click="confirmHandler" class="bottom-btn">Confirm</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
addressForm: {
firstname: '',
lastname: '',
street: '',
postcode: '',
city: '',
region: '',
telephone: '',
},
rules: {
firstname: {
rules: [{
required: true,
errorMessage: 'This is a required field.'
}]
},
lastname: {
rules: [{
required: true,
errorMessage: 'This is a required field.'
}]
},
street: {
rules: [{
required: true,
errorMessage: 'This is a required field.'
}]
},
postcode: {
rules:[{
required: true,
errorMessage: 'This is a required field.'
}],
},
city: {
rules:[{
required: true,
errorMessage: 'This is a required field.'
}]
},
region: {
rules:[{
required: true,
errorMessage: 'This is a required field.'
}]
},
telephone: {
rules:[{
required: true,
errorMessage: 'This is a required field.'
}]
},
}
};
},
onLoad(options) {
this.addressForm.test = 'qwe';
},
methods: {
confirmHandler() {
// 不参与校验的字段名,保留
console.log(9999999999);
let otherKey = ['test'];
// 这里有一个问题:按照uni-forms的
this.$refs._address_form.validate(otherKey).then((res) => {
console.log('validate res -- ',res);
}).catch((err) => {
console.log('validate err -- ',err);
});
}
}
}
</script>
<style scoped lang="scss">
page{
width: 100%;
}
.edit-order-address-page{
position: relative;
box-sizing: border-box;
width: 100%;
padding-bottom: 150rpx;
}
.billing-form-root{
box-sizing: border-box;
width: 100%;
}
.billing-form{
box-sizing: border-box;
width: 100%;
padding: 0 20rpx;
}
.form-title{
box-sizing: border-box;
width: 100%;
padding: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
.title-text{
font-size: 34rpx;
font-weight: bold;
}
.title-select{
font-size: 12px;
text-decoration: underline;
color: $base-color;
}
}
.uni-forms-item{
position: relative;
}
// /deep/ .uni-easyinput__content{
// height: 76rpx; // 38
// }
.uni-forms-item.uni-forms-item-error .form-picker{
border-color: #dd524d;
}
.form-picker{
height: 76rpx;
border: 1px solid rgb(229,229,229);
border-radius: 4px;
}
.form-picker-content{
height: 100%;
display: flex;
align-items: center;
padding-left:10px;
line-height: normal;
}
.form-picker-content.tips{
color: $font-color-light;
}
.form-label{
position: relative;
box-sizing: border-box;
width: 100%;
font-size: 30rpx;
.form-label-tips{
color: $font-color-light;
font-size: 28rpx;
}
}
.form-label.required{
padding-left: 20rpx;
}
.form-label.required:after{
position: absolute;
content: '*';
top: 50%;
left:0;
transform: translateY(-50%);
font-size: 28rpx;
color: $base-color;
height: 1em;
}
.order-address-bottom{
position:fixed;
left:0;
bottom:0;
box-sizing: border-box;
width: 100%;
height: 120rpx;
background-color: #fff;
padding: 20rpx;
box-shadow: 0px -5px 5px -5px rgba(0,0,0,0.3);
}
.bottom-btn{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
color: #fff;
background-color: $base-color;
font-size: 34rpx;
line-height: normal;
border-radius: 8rpx;
}
</style>
- 发布:2021-11-25 10:36
- 更新:2021-11-25 10:36
- 阅读:850
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: windows7 旗舰版
HBuilderX类型: 正式
HBuilderX版本号: 3.1.22
手机系统: Android
手机系统版本号: Android 8.0
手机厂商: 华为
手机机型: 荣耀8
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
// validate方法传入otherKey,校验通过后then函数中无法获取到表单数据,输出null
let otherKey = ['test'];
this.$refs._address_form.validate(otherKey).then((res) => {
console.log('validate res -- ',res);
}).catch((err) => {
console.log('validate err -- ',err);
});
// validate方法不传入otherKey,校验通过后then函数中可以获取到完整的表单数据
let otherKey = ['test'];
this.$refs._address_form.validate().then((res) => {
console.log('validate res -- ',res);
}).catch((err) => {
console.log('validate err -- ',err);
});
// validate方法传入otherKey,校验通过后then函数中无法获取到表单数据,输出null
let otherKey = ['test'];
this.$refs._address_form.validate(otherKey).then((res) => {
console.log('validate res -- ',res);
}).catch((err) => {
console.log('validate err -- ',err);
});
// validate方法不传入otherKey,校验通过后then函数中可以获取到完整的表单数据
let otherKey = ['test'];
this.$refs._address_form.validate().then((res) => {
console.log('validate res -- ',res);
}).catch((err) => {
console.log('validate err -- ',err);
});
预期结果:
// validate方法传入otherKey,校验通过后then函数中输出包含test字段的表单数据
let otherKey = ['test'];
this.$refs._address_form.validate(otherKey).then((res) => {
console.log('validate res -- ',res);
}).catch((err) => {
console.log('validate err -- ',err);
});
// validate方法传入otherKey,校验通过后then函数中输出包含test字段的表单数据
let otherKey = ['test'];
this.$refs._address_form.validate(otherKey).then((res) => {
console.log('validate res -- ',res);
}).catch((err) => {
console.log('validate err -- ',err);
});
实际结果:
// validate方法传入otherKey,校验通过后then函数中无法获取到表单数据,输出null
let otherKey = ['test'];
this.$refs._address_form.validate(otherKey).then((res) => {
console.log('validate res -- ',res);
}).catch((err) => {
console.log('validate err -- ',err);
});
// validate方法传入otherKey,校验通过后then函数中无法获取到表单数据,输出null
let otherKey = ['test'];
this.$refs._address_form.validate(otherKey).then((res) => {
console.log('validate res -- ',res);
}).catch((err) => {
console.log('validate err -- ',err);
});
bug描述:
【描述】
uni-forms validate方法传入要保留的字段,校验通过后,无法获取到表单数据;不传入要保留的字段,校验通过后能正常获取到表单数据
0 个回复