解决uniapp使用up-form组件,uView提示:未设置rules,请看文档说明!如果已经设置,请刷新页面。

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)
复制代码
相关推荐
Mintopia30 分钟前
在 Next.js 项目中驯服代码仓库猛兽:Husky + Lint-staged 预提交钩子全攻略
前端·javascript·next.js
Mintopia30 分钟前
AIGC API 接口的性能优化:并发控制与缓存策略
前端·javascript·aigc
IT_陈寒1 小时前
SpringBoot 3.2新特性实战:这5个隐藏技巧让你的启动速度提升50%
前端·人工智能·后端
星哥说事1 小时前
国产开源文档神器:5 分钟搭建 AI 驱动 Wiki 系统,重新定义知识库管理
前端
degree5201 小时前
前端单元测试入门:使用 Vitest + Vue 测试组件逻辑与交互
前端
3Katrina1 小时前
一文解决面试中的跨域问题
前端
阿白19551 小时前
JS基础知识——创建角色扮演游戏
前端
傻梦兽1 小时前
用 scheduler.yield() 让你的网页应用飞起来⚡
前端·javascript
然我1 小时前
搞定异步任务依赖:Promise.all 与拓扑排序的妙用
前端·javascript·算法
Focusbe1 小时前
为什么 “大前端” 需要 “微前端”?
前端·后端·架构