AntmJS / vantui

基于vant-weapp实现的Taro-React版及H5-React版组件库https://antmjs.github.io/vantui/#/home
https://antm-js.gitee.io/vantui/#/home
MIT License
747 stars 98 forks source link

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

Open Lin-Min opened 1 week ago

Lin-Min commented 1 week ago

这个 Issue 涉及以下平台:

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

image

环境 "@antmjs/vantui": "3.4.9" 附加信息

zuolung commented 1 week ago
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>
    </>
  )
}

没有复现