nutui icon indicating copy to clipboard operation
nutui copied to clipboard

官方NUTUI示例代码错误

Open gaojizu opened this issue 3 months ago • 1 comments

NutUI 包名

@nutui/nutui-taro

NutUI 版本号

4.3.14

平台

jd

重现链接

https://codesandbox.io/p/devbox/nutui4-vite-demo-forked-2gkl7h

重现步骤

模块: Form表单

子模块: 表单校验
 <nut-form
    ref="formRef"
    :model-value="formData"
    :rules="{
      name: [
        { required: true, message: '请填写姓名' },
        {
          message: 'name 至少两个字符',
          validator: nameLengthValidator
        }
      ]
    }"
  >
    <nut-form-item label="姓名" prop="name">
      <nut-input
        v-model="formData.name"
        placeholder="请输入姓名,blur 事件校验"
        type="text"
        @blur="customBlurValidate('name')"
      />
    </nut-form-item>

这段代码tarojs框架开发的小程序项目中是无法正常显示必填的红色星号的,因为他的required 并没有在item上实现,同时他的校验规则也不符合规范,应该在nut-form-item上面实现,而不是nut-form

期望的结果是什么?

期望的结果

可以正常在Tarojs框架开发的小程序项目中显示姓名前面的必填提示的红色星号

实际的结果是什么?

实际结果

并没有任何红色星号提示

环境信息

在TaroJs实现的小程序项目中引入,但是直接在codeworkspace上是可以显示的

其他补充信息

暂无

gaojizu avatar Sep 22 '25 01:09 gaojizu

没有复现诶,我用的是京东小程序开发者工具

https://github.com/holyfata/nutui-playground -> feature_#3296_reproduction

  <nut-form
    ref="formRef"
    :model-value="formData"
    :rules="{
      name: [
        { required: true, message: '请填写姓名' },
        {
          message: 'name 至少两个字符',
          validator: nameLengthValidator
        }
      ]
    }"
  >
    <nut-form-item label="姓名" prop="name">
      <nut-input
        v-model="formData.name"
        placeholder="请输入姓名,blur 事件校验"
        type="text"
        @blur="customBlurValidate('name')"
      />
    </nut-form-item>
    <nut-space style="margin: 10px">
      <nut-button type="primary" size="small" @click="submit">提交</nut-button>
      <nut-button size="small" @click="reset">重置提示状态</nut-button>
    </nut-space>
  </nut-form>
Image

holyfata avatar Dec 10 '25 11:12 holyfata