up-form组件 :model=“formData” :rules=“rules”
rules
中的属性在formData
要赋初始值,比如下面的例子
表单样式
<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>
正确代码
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)
错误代码
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)
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » 解决uniapp使用up-form组件,uView提示:未设置rules,请看文档说明!如果已经设置,请刷新页面。
发表评论 取消回复