vantui
vantui copied to clipboard
FormRender组件使用rules正则校验存在大的bug
这个 Issue 涉及以下平台:
- [x] 微信小程序
- [ ] 支付宝小程序
- [ ] 百度小程序
- [ ] 头条小程序
- [ ] 快手小程序
- [ ] QQ 轻应用
- [ ] Web 平台(H5)
BUG 描述
1、使用FormRender组件的rules自定义校验时,输入最后一项不进入rule方法,点击校验才进入rule方法,并且这时是校验通过的,但是界面显示校验未通过的提示。
2、多点几次button校验form会发现rule的val有时是空的,触发校验报错,但界面是有值的
复现步骤
使用FormRender组件,并且type为inputNumber(不确定其他类型存不存在这个问题),使用rules进行自定义校验,随便搞个正则校验就会触发这个bug,最直接的就是校验手机号位数去验证。
期望结果
正常校验
实际结果
显示校验
截图
环境
"@antmjs/vantui": "3.4.9"
附加信息
import { Form, Button, Dialog, FormRender } from '@antmjs/vantui'
type IParams = {
account: number
name: string
price: string
radio: string
}
const Dialog_ = Dialog.createOnlyDialog()
export default function Index() {
const form = Form.useForm()
return (
<>
<Dialog_ />
<FormRender<IParams>
form={form}
config={[
{
fields: 'account',
type: 'inputNumber',
required: true,
label: '账号',
rules: {
rule: /^[0-9]{6}$/,
message: '请输入6位数的账号',
},
},
{
fields: 'name',
type: 'input',
label: '名称',
},
{
fields: 'radio',
type: 'radio',
label: '价格',
options: [
{
name: '选项1',
value: '1',
},
{
name: '选项2',
value: '2',
},
],
},
{
fields: 'price',
type: 'inputPrice',
label: '价格',
},
]}
/>
<Button
style={{ width: '100%', marginTop: '20px' }}
type="primary"
onClick={() => {
console.info(form.getFieldsValue())
form.validateFields((err, res) => {
console.info(form.getFieldsValue())
if (!err?.length) {
Dialog_.alert({
message: JSON.stringify(res),
})
}
})
}}
>
提交
</Button>
</>
)
}
没有复现
组件内定义的一个变量,比如定义的reg=/xxx/, 然后在rule方法引用这个reg就会复现。