パスワードを変更し、パスワードを確認してantdを確認します

コード

<Form ref={
    
    form => this.form = form} onFinish={
    
    this.handleOk} initialValues={
    
    {
    
     id }}>
    <FormElement type="hidden" name="id" />
    <FormElement
        label="新密码"
        type="password"
        name="password"
        required
        rules={
    
    [{
    
    
            pattern:
                /^(?![^a-zA-Z]+$)(?!\\D+$).{8,16}$/,
            message: "8-16位字符，必须包括字母和数字",
        }]}
    />
    <FormElement
        label="确认密码"
        type="password"
        name="reNewPassword"
        dependencies={
    
    ['password']}
        required
        rules={
    
    [
            ({
     
      getFieldValue }) => ({
    
    
                validator(rule, value) {
    
    
                    if (!value || getFieldValue('password') === value) {
    
    
                        return Promise.resolve();
                    }
                    return Promise.reject('新密码与确认新密码不同！');
                },
            }),
        ]}
    />
</Form>

知識ポイント 1: 依存関係

フィールド間に依存関係がある場合に使用されます。フィールドに依存関係プロパティが設定されている場合。次に、依存するフィールドが更新されると、フィールドは自動的に更新と検証をトリガーします。一般的なシナリオは、登録済みユーザー フォームの「パスワード」および「パスワードの確認」フィールドです。「パスワードの確認」の検証は、「パスワード」フィールドに依存します。依存関係を設定した後、「パスワード」フィールドを更新すると、「パスワードの検証」の検証ロジックが再トリガーされます。

知識ポイント 2: getFieldValue

知識ポイント 3: バリデーター

The custom validator has no effect.
これは、バリデータにエラーがあり、コールバックが実行されないためです。非同期で promise を返すか、エラー キャプチャに try...catch を使用するかを選択できます。

validator: async (rule, value) => {
    
    
  throw new Error('Something wrong!');
}

// or

validator(rule, value, callback) => {
    
    
  try {
    
    
    throw new Error('Something wrong!');
  } catch (err) {
    
    
    callback(err);
  }
}