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

// 表单部分

<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

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

阅读 5.5k
2 个回答

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

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

题主的代码没问题

楼主解决了么

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题