vantui icon indicating copy to clipboard operation
vantui copied to clipboard

FormRender组件使用rules正则校验存在大的bug

Open Lin-Min opened this issue 1 year ago • 2 comments

这个 Issue 涉及以下平台:

  • [x] 微信小程序
  • [ ] 支付宝小程序
  • [ ] 百度小程序
  • [ ] 头条小程序
  • [ ] 快手小程序
  • [ ] QQ 轻应用
  • [ ] Web 平台(H5)

BUG 描述 1、使用FormRender组件的rules自定义校验时,输入最后一项不进入rule方法,点击校验才进入rule方法,并且这时是校验通过的,但是界面显示校验未通过的提示。 2、多点几次button校验form会发现rule的val有时是空的,触发校验报错,但界面是有值的 复现步骤 使用FormRender组件,并且type为inputNumber(不确定其他类型存不存在这个问题),使用rules进行自定义校验,随便搞个正则校验就会触发这个bug,最直接的就是校验手机号位数去验证。 期望结果 正常校验 实际结果 显示校验 截图 image 环境 "@antmjs/vantui": "3.4.9" 附加信息

Lin-Min avatar Sep 29 '24 06:09 Lin-Min

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>
    </>
  )
}

没有复现

zuolung avatar Sep 30 '24 08:09 zuolung

组件内定义的一个变量,比如定义的reg=/xxx/, 然后在rule方法引用这个reg就会复现。

Lin-Min avatar Oct 08 '24 08:10 Lin-Min