설계: https://github.com/yiminghe/async-validator/

BTW, callback 를 사용하여 알리지 않으면 async-validator가 비동기 프로시저가 종료되었음을 어떻게 알 수 있습니까?

나는 불평했다 https://www.zhihu.com/question/33629737/answer/150154145

우리의 오픈 소스 원칙 중 하나가 물과 흙을 덮는 것이라는 문서를 추가할 수 있습니다.

문서가 업데이트되었습니다.

안녕하세요, 이 사용법은 수업에서만 쓸 수 있나요?
순전히 기능적인 방식으로 React Component를 작성할 수 있습니까?그렇다면 어떤 경우가 있습니까?

이 API 디자인은 정말 촌스럽네요.. 특정 체크박스가 선택되었는지 확인하고 싶은 생각이 듭니다.

rules: [
            {
              message: 'You need to agree to our terms to sign up.',
              validator: (rule, value, cb) => (value === true ? cb() : cb(true)),
            },
          ],

그리고 콜백에게 주어진 첫 번째 매개 변수는에 중복 오류 메시지입니다 message 가 긴 아무것도 반환 한 것으로 보이지만 ( message 사용됩니다, 그것이 적용되어야한다 message 오류 메시지).

대부분의 사용자가 예상하는 사용법은 true 또는 false 를 직접 반환하여 옳고 그름을 결정하는 것입니다.

rules: [
            {
              message: 'You need to agree to our terms to sign up.',
              validator: (rule, value, cb) => value === true,
            },
          ],

사용 가능하지만 이 API를 최적화하는 것이 좋습니다. 즉, https://github.com/yiminghe/async-validator/ 를 사용하는 것이지만 ANT는 여기에서 완료할 수 있으며 호출 시 캡슐화할 수 있습니다.

@neekey 는 async-validator에 호환되는 PR을 제출할 수 있습니다.

@nekey 이 이상한 인터페이스는 다음을 달성합니다.

• 비동기 유효성 검사
• 다른 오류 지원 및 다른 메시지 반환

더 좋은 방법이 있습니까?

<Row>
                <Col span={24} key={"method"}>
                    <FormItem {...formItemMethodLayout} label="请求方法">
                        {getFieldDecorator("method", {
                            initialValue: this.state.data.method,
                            validateTrigger: "onChange",
                            rules: [{
                                required: true,
                                message: `请选择请求方法`
                            }, {
                                //validator: this.state.checkUnique ? this.checkConfirmMethod.bind(this) : (rule, value, callback) => {callback();},
                                validator: (这如何判断当前组件是否开始校验了) ？
 this.checkConfirmMethod.bind(this) : (如果不是当前组件开始校验，就调用其他函数),
                            }]
                        })(
                            <Select placeholder={"请选择请求方法"} onChange={::this.handleChange.bind(this)}>
                                {this.state.apiRequestMethodSelect}
                            </Select>
                        )}
                    </FormItem>
                </Col>
            </Row

기능검증 만날때마다 한번씩 보러 와야겠습니다..기억하기 정말 힘드네요

유효성 검사기 기능

startNumValidator = (rule, value, callback) => {
    const { exportDataCount } = this.props;
    const reg = /^[1-9][0-9]*$/;
    let errors = [];
    if (!reg.test(value) || value > exportDataCount) {
      errors.push(new Error('illegal value'));
    }
    callback(errors);
  }

통합 콜백 오류 아닌가요? 상당히 합리적으로 느껴집니다.
antd의 새 버전이 비동기식과 동기식 검증을 구분하기 시작했는지 모르겠습니다. validator(동기식) asyncValidator(비동기식)

요청 후 백그라운드에서 반환된 콜백에서 이 메시지 프롬프트를 호출하는 방법

규칙에서 유효성 검사기를 사용하여 사용자 지정 확인을 수행할 때 문제가 발생했습니다.
validateFunc = (규칙, 값, 콜백) => {
사실이면) {
console.log(11);
callback('오류 메시지');
반품;
}
콜백();
};
해당 FormItem 컴포넌트 아래에 확인 결과 'Error message'를 표시하고 싶은데 콜백 실행 후 해당 FormItem 컴포넌트 아래에 'Error message'가 출력되지 않고 콘솔에 출력되는 이유는?

在对应的FormItem组件下显示 의 논리는 어떻게 작성합니까?

@neekey 는 async-validator에 호환되는 PR을 제출할 수 있습니다.

누군가 그것을 언급했다고 yminghe가 말했습니다 .

在对应的FormItem组件下显示 의 논리는 어떻게 작성합니까?

커스텀 검증 방식을 변경하여 onFieldsChange()에서 판단했는데, 커스텀 룰이 충족되지 않으면 에러가 직접 변경되고, 컨트롤에 에러 정보가 표시됩니다.
onFieldsChange(props, changedFields) { const { dispatch, detail } = props; const finalChangedFields = { ...changedFields }; // 校验时间大小是否符合规则 if ( _.has(changedFields, 'currentDate') && detail?.targetDate && compareCurrentTimeEarlierThanTargetTime( finalChangedFields.currentDate, detail?.targetDate ) ) { finalChangedFields.currentDate.errors = [ { message: 'current Date should be latter than target Date', field: 'currentDate', }, ]; } dispatch({ type: 'controllerModel/saveDetail', payload: { changedFields: finalChangedFields, data: detail, }, }); }

확인을 통과한 후 다음 메시지가 사라지지 않는 이유는 무엇입니까?

질문하십시오. 이 유효성 검사기는 페이지가 로드될 때 확인을 수행하지 않을 수 있습니까?

@neekey
콜백 기능을

<Form>
          <Form.Item ...>
            {getFieldDecorator('name', {validator: (rule, value, callback) => setTimeout(callback(), 1000)})(
                <Input placeholder="name" />
            )}
          </Form.Item>
....

setTimeout이 실행되기 전에 전체 구성 요소가 마운트 해제됩니다. 그런 다음 시간 초과가 발생하고 콜백이 시작되고

@jiufengdadi
이 문제가 발생했습니다.
내 솔루션은 undefined 을 callback 입니다. callback 의 첫 번째 매개변수가 빈 배열이면 유효성 검사기가 통과합니다. 그리고 매개변수에 기본값을 설정하므로 undefined 도 작동합니다.

callback 정의: L146

내 사용자 지정 유효성 검사가 통과된 후 async-validator: [""]가 나타나는 이유는 무엇입니까?

두 개의 검사가 있는 경우 첫 번째 검사는 실패합니다. 이유는 무엇입니까?
```
규칙: [
{
필수: 사실,
메시지: '전화번호를 입력하세요',
},
{
유효성 검사기: (규칙, 값, 콜백) => {
노력하다 {
if (this.props.form.getFieldValue('접두사') == 86 && 값) {
상수 등록 = /^1d{10}$/;
if (!reg.test(값)) {
throw new Error('뭔가 잘못되었습니다!');
}
}
} 잡기(오류) {
콜백(오류);
}
},
메시지: '유효한 휴대폰 번호를 입력하세요',
},
],

 rules: [
                {
                  required: true,
                  message: '请输入手机号',
                },
                {
                  validator: (rule, value, callback) => {
                    try {
                      if (this.props.form.getFieldValue('prefix') == 86 && value) {
                        const reg = /^1\d{10}$/;
                        if (!reg.test(value)) {
                          throw new Error('Something wrong!');
                        }
                      }
                    } catch (err) {
                      callback(err);
                       return // +
                    }
                     callback() // +
                  },
                  message: '请输入有效手机号',
                },
              ],

규칙에서 유효성 검사기를 사용하여 사용자 지정 확인을 수행할 때 문제가 발생했습니다.
validateFunc = (규칙, 값, 콜백) => {
사실이면) {
console.log(11);
callback('오류 메시지');
반품;
}
콜백();
};
해당 FormItem 컴포넌트 아래에 확인 결과 'Error message'를 표시하고 싶은데 콜백 실행 후 해당 FormItem 컴포넌트 아래에 'Error message'가 출력되지 않고 콘솔에 출력되는 이유는?

규칙에서 유효성 검사기를 사용하여 사용자 지정 확인을 수행할 때 문제가 발생했습니다.
validateFunc = (규칙, 값, 콜백) => {
사실이면) {
console.log(11);
callback('오류 메시지');
반품;
}
콜백();
};
해당 FormItem 컴포넌트 아래에 확인 결과 'Error message'를 표시하고 싶은데 콜백 실행 후 해당 FormItem 컴포넌트 아래에 'Error message'가 출력되지 않고 콘솔에 출력되는 이유는?

당신은 그것을 해결 했습니까, 같은 상황이 발생했습니다

 rules: [
                {
                  required: true,
                  message: '请输入手机号',
                },
                {
                  validator: (rule, value, callback) => {
                    try {
                      if (this.props.form.getFieldValue('prefix') == 86 && value) {
                        const reg = /^1\d{10}$/;
                        if (!reg.test(value)) {
                          throw new Error('Something wrong!');
                        }
                      }
                    } catch (err) {
                      callback(err);
                       return // +
                    }
                     callback() // +
                  },
                  message: '请输入有效手机号',
                },
              ],

메시지 프롬프트가 반복됩니까? 이와 유사한 '휴대전화 번호를 입력하십시오. 유효한 휴대전화 번호를 입력하십시오.'

 rules: [
                {
                  required: true,
                  message: '请输入手机号',
                },
                {
                  validator: (rule, value, callback) => {
                    try {
                      if (this.props.form.getFieldValue('prefix') == 86 && value) {
                        const reg = /^1\d{10}$/;
                        if (!reg.test(value)) {
                          throw new Error('Something wrong!');
                        }
                      }
                    } catch (err) {
                      callback(err);
                       return // +
                    }
                     callback() // +
                  },
                  message: '请输入有效手机号',
                },
              ],

메시지 프롬프트가 반복됩니까? 이와 유사한 '휴대전화 번호를 입력하십시오. 유효한 휴대전화 번호를 입력하십시오.'

하지 않을 것이다

다음과 같이 하십시오

빨간색 체크가 사라지지 않은 이유는 무엇입니까? ? ? 사양을 충족하는 이러한 종류의 상호 영향 검증을 수행하는 방법은 무엇입니까? ? ?

규칙의 유효성 검사기의 콜백은 성공 여부에 관계없이 호출되어야 하며 매개변수가 전달되지 않는다는 차이점이 있습니다.

규칙에서 유효성 검사기를 사용하여 사용자 지정 확인을 수행할 때 문제가 발생했습니다.
validateFunc = (규칙, 값, 콜백) => {
사실이면) {
console.log(11);
callback('오류 메시지');
반품;
}
콜백();
};
해당 FormItem 컴포넌트 아래에 확인 결과 'Error message'를 표시하고 싶은데 콜백 실행 후 해당 FormItem 컴포넌트 아래에 'Error message'가 출력되지 않고 콘솔에 출력되는 이유는?

규칙에서 유효성 검사기를 사용하여 사용자 지정 확인을 수행할 때 문제가 발생했습니다.
validateFunc = (규칙, 값, 콜백) => {
사실이면) {
console.log(11);
callback('오류 메시지');
반품;
}
콜백();
};
해당 FormItem 컴포넌트 아래에 확인 결과 'Error message'를 표시하고 싶은데 콜백 실행 후 해당 FormItem 컴포넌트 아래에 'Error message'가 출력되지 않고 콘솔에 출력되는 이유는?

당신은 그것을 해결 했습니까, 같은 상황이 발생했습니다

저도 이 문제가 발생했습니다.초기값이 비어있으면 정상 입력 후 onblur 시간을 통해 커스텀 유효성 검사기가 정상적으로 실행될 수 있으며 오류가 있으면 프롬프트가 표시되지만 초기 초기값에 값이 있을 때 validatefields는 모든 양식 구성 요소의 통합 유효성 검사를 수행하고 err은 null로 출력되며 잠시 후 유효성 검사 실패가 콘솔에 다시 팝업됩니다. 사용자 정의 유효성 검사기는 비동기 작업입니다.

나는 당신이 반환을 삭제한다고 생각합니다; 기능에서 다시 시도하십시오.유용할 수 있습니다.

------------------ 원본 메시지 ------------------
보낸 사람: "Ivan-hl"< [email protected]>;
배송 시간: 2019년 11월 20일(수요일) 오후 5시 19분
받는 사람: "ant-design/ant-design"< [email protected]>;
참조: "주"< [email protected]>, "수동"< [email protected]>;
제목: Re: [ant-design/ant-design] Form 컴포넌트의 validator 함수에 항상 callback() 가 필요한 이유는 무엇입니까?폼 규칙에서 validator를 사용할 때 메서드 본문이 항상 callback()을 호출해야 하는 이유 검증?(#5155)

규칙에서 유효성 검사기를 사용하여 사용자 지정 확인을 수행할 때 문제가 발생했습니다.
validateFunc = (규칙, 값, 콜백) => {
사실이면) {
console.log(11);
callback('오류 메시지');
반품;
}
콜백();
};
해당 FormItem 컴포넌트 아래에 확인 결과 'Error message'를 표시하고 싶은데 콜백 실행 후 해당 FormItem 컴포넌트 아래에 'Error message'가 출력되지 않고 콘솔에 출력되는 이유는?

규칙에서 유효성 검사기를 사용하여 사용자 지정 확인을 수행할 때 문제가 발생했습니다.
validateFunc = (규칙, 값, 콜백) => {
사실이면) {
console.log(11);
callback('오류 메시지');
반품;
}
콜백();
};
해당 FormItem 컴포넌트 아래에 확인 결과 'Error message'를 표시하고 싶은데 콜백 실행 후 해당 FormItem 컴포넌트 아래에 'Error message'가 출력되지 않고 콘솔에 출력되는 이유는?

당신은 그것을 해결 했습니까, 같은 상황이 발생했습니다

저도 이 문제가 발생했습니다.초기값이 비어있으면 정상 입력 후 onblur 시간을 통해 커스텀 유효성 검사기가 정상적으로 실행될 수 있으며 오류가 있으면 프롬프트가 표시되지만 초기 초기값에 값이 있을 때 validatefields는 모든 양식 구성 요소의 통합 유효성 검사를 수행하고 err은 null로 출력되며 잠시 후 유효성 검사 실패가 콘솔에 다시 팝업됩니다. 사용자 정의 유효성 검사기는 비동기 작업입니다.

—
이 스레드에 가입했기 때문에 이 메시지를 받고 있습니다.
이 이메일에 직접 답장하거나 GitHub에서 보거나 구독을 취소하세요.

너무 나쁨

확인 기능에 예외가 있으면 프롬프트가 표시되지 않습니다.
오랫동안 구덩이에 빠졌습니다. . .

이 AntdV가 유지되지 않는지 궁금합니다.

@kongling94 ?

같은 문제가 발생했는데 더 이상 텍스트가 없습니까?

<a-input id="code" placeholder="请输入用户ID"v-decorator="[ 'code', {rules: [{ required: true, message: '请输入用户ID' }, { validator: handleUsername }], validateTrigger: 'change'} ]" > </a-input>
handleUsername(rule, value, callback) { value = value.trim() if (value.length == 0) { this.username = ''; callback(); } else { fetchUsername({ code: value }) .then((rest) => { if (rest.code == 200) { this.username = rest.data; //callback(); } else { this.username = ''; callback(new Error(rest.msg)) return; } }).finally(() => { callback() }) } },
<a-form :label-col="labelCol" :wrapper-col="wrapperCol" :form="form" @submit="handleSubmit"> <a-button type="primary" htmlType="submit">确定</a-button> </a-form>
응답과 프롬프트가 없는지 확인하려면 클릭하고 콘솔에 async-validator:["code is required"]를 입력합니다.
validateFields를 전혀 입력하지 마십시오.
유효성 검사기와 validateTrigger를 제거하고 확인을 클릭하면 정상적으로 프롬프트가 표시됩니다.
문제가 무엇입니까?

<a-input id="code" placeholder="请输入用户ID"v-decorator="[ 'code', {rules: [{ required: true, message: '请输入用户ID' }, { validator: handleUsername }], validateTrigger: 'change'} ]" > </a-input>
handleUsername(rule, value, callback) { value = value.trim() if (value.length == 0) { this.username = ''; callback(); } else { fetchUsername({ code: value }) .then((rest) => { if (rest.code == 200) { this.username = rest.data; //callback(); } else { this.username = ''; callback(new Error(rest.msg)) return; } }).finally(() => { callback() }) } },
<a-form :label-col="labelCol" :wrapper-col="wrapperCol" :form="form" @submit="handleSubmit"> <a-button type="primary" htmlType="submit">确定</a-button> </a-form>
응답과 프롬프트가 없는지 확인하려면 클릭하고 콘솔에 async-validator:["code is required"]를 입력합니다.
validateFields를 전혀 입력하지 마십시오.
유효성 검사기와 validateTrigger를 제거하고 확인을 클릭하면 정상적으로 프롬프트가 표시됩니다.
문제가 무엇입니까?

이 문제를 해결하셨습니까?또한이 문제가 발생했습니다.

<a-input id="code" placeholder="请输入用户ID"v-decorator="[ 'code', {rules: [{ required: true, message: '请输入用户ID' }, { validator: handleUsername }], validateTrigger: 'change'} ]" > </a-input>
handleUsername(rule, value, callback) { value = value.trim() if (value.length == 0) { this.username = ''; callback(); } else { fetchUsername({ code: value }) .then((rest) => { if (rest.code == 200) { this.username = rest.data; //callback(); } else { this.username = ''; callback(new Error(rest.msg)) return; } }).finally(() => { callback() }) } },
<a-form :label-col="labelCol" :wrapper-col="wrapperCol" :form="form" @submit="handleSubmit"> <a-button type="primary" htmlType="submit">确定</a-button> </a-form>
응답과 프롬프트가 없는지 확인하려면 클릭하고 콘솔에 async-validator:["code is required"]를 입력합니다.
validateFields를 전혀 입력하지 마십시오.
유효성 검사기와 validateTrigger를 제거하고 확인을 클릭하면 정상적으로 프롬프트가 표시됩니다.
문제가 무엇입니까?

이 문제를 해결하셨습니까?또한이 문제가 발생했습니다.

// 自定义密码校验
  handleConfirmPassword = (rule, value, callback) => {
    const { getFieldValue } = this.props.form;
    if (value && value !== getFieldValue('newPwd')) {
      callback('两次输入不一致！');
    }

    // Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应
    callback();
  };
我是这么解决的

validatorFun(규칙, 값, 콜백) {
const psw = this.form.getFieldValue('newPwd')
if (값 && 값 !== psw) {
rule.message = '两次密码不一致'
콜백(규칙)
}
콜백()
}