up-form组件 :model="formData" :rules="rules"
rules
中的属性在formData
要赋初始值,比如下面的例子
表单样式
html
<up-form labelPosition="top" labelWidth="auto" :labelStyle="{ color: '#333333' }" :model="formData"
:rules="rules" ref="formRef">
<view class="form-item">
<up-form-item borderBottom prop="userName" label="收货人">
<up-input v-model="formData.userName" border="none" placeholder="请输入姓名" />
</up-form-item>
</view>
<view class="form-item">
<up-form-item borderBottom prop="phone" label="手机号吗">
<up-input v-model="formData.phone" border="none" placeholder="请输入手机号吗" />
</up-form-item>
</view>
<view class="form-item">
<up-form-item borderBottom prop="address" label="收货地址">
<up-input v-model="formData.address" border="none" placeholder="请输入详情地址" />
</up-form-item>
</view>
</up-form>
✔正确代码
js
const state = reactive({
formData: {
userName: '',
phone: '',
address: '',
} as UserAddressUpdateReq,
rules: {
'userName': {
type: 'string',
required: true,
message: '请输入姓名',
trigger: ['blur', 'change']
},
'phone': [{
type: 'string',
required: true,
message: '请输入手机号吗',
trigger: ['blur', 'change']
},
{
validator: (rule: any, value: any, callback: any) => {
return uni.$u.test.mobile(value);
},
message: '手机号码不正确',
trigger: ['change', 'blur'],
}],
'address': {
type: 'string',
required: true,
message: '请输入详情地址',
trigger: ['blur', 'change']
}
}
})
const { formData, rules } = toRefs(state)
❌错误代码
js
const state = reactive({
formData: {} as UserAddressUpdateReq,
rules: {
'userName': {
type: 'string',
required: true,
message: '请输入姓名',
trigger: ['blur', 'change']
},
'phone': [{
type: 'string',
required: true,
message: '请输入手机号吗',
trigger: ['blur', 'change']
},
{
validator: (rule: any, value: any, callback: any) => {
return uni.$u.test.mobile(value);
},
message: '手机号码不正确',
trigger: ['change', 'blur'],
}],
'address': {
type: 'string',
required: true,
message: '请输入详情地址',
trigger: ['blur', 'change']
}
}
})
const { formData, rules } = toRefs(state)