nutui
nutui copied to clipboard
官方NUTUI示例代码错误
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上是可以显示的
其他补充信息
暂无
没有复现诶,我用的是京东小程序开发者工具
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>