react ant-design-mobile中表单校验无效的问题

发布于 2022-09-11 22:29:31 字数 2176 浏览 21 评论 0

// 表单部分

<form>
          <List>
            <InputItem
              {...getFieldProps('idcard', {
                rules: [
                  { required: true, message: '请输入身份证号' },
                  { validator: this.validateIDcard },
              ]})}
              clear
              error={getFieldError('idcard')}
              onErrorClick={() => {
                // 接收到验证失败的提示,点击错误时展示
                Toast.fail(getFieldError('idcard'))
              }}
              placeholder="持卡人身份证号">身份证号</InputItem>
            <InputItem {...getFieldProps('centerno',{
              rules: [
                {required: true, message: '请输入服务中心编号'},
                {validator: this.validateCenterno}
              ]
            })}
            clear
            error = {getFieldError('centerno')}
            onErrorClick = {() => {Toast.fail(getFieldError('centerno'))}}
            placeholder="服务中心编号">服务中心</InputItem>
            <Item>
              <Button type="primary" style ={{backgroundColor: "#FFC105"}} onClick={this.onSubmit}>提交申请</Button>
            </Item>
          </List>
        </form>

校验部分

  validateIDcard = (rule, value, callback) => {
    if (value.length === 15 || value.length === 18) {
      callback();
    } else {
      // 验证失败 抛出错误,再点击错误按钮时展示
      callback(new Error('请输入15或18位的身份证号'));
    }
  }
  validateCenterno = (rule, v, cb) => {
    if (v.length >=4  && v.length <= 6) {
      cb();
    } else {
      cb(new Error('请输入4至6位服务中心编号'));
    }
  }

  onSubmit = () => {
    this.props.form.validateFields({ force: true }, (error) => {
      console.log('submit')
      console.log(error)
      if (!error) {
        console.log(this.props.form.getFieldsValue());
      } else {
        Toast.fail('输入有误,请检查输入无误后再提交');
      }
    });
  }

现在问题是,正常输入的时候会进行校验

clipboard.png

但是在列表全为空的时候点击提交 不会校验, 无反应
在部分输入,校验出错的情况,点击提交 校验部分错误消失, 但是仍然没有错误弹出 不走onSubmit

求大家帮忙看看我是哪里写的有问题嘛?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

总以为 2022-09-18 22:29:31

提交表单时需要组织表单的默认行为。

handleSubmit = (e) => {  e.preventDefault();  ......}

题主的代码没问题

謸气贵蔟 2022-09-18 22:29:31

楼主解决了么

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文