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)