Ant Design Form.Item validateStatus 属性校验新旧密码相同

当新旧密码相同时，我们可以使用 'validateStatus' 属性来控制校验状态的显示。具体做法是在 'Form.Item' 组件中添加 'validateStatus' 属性，并设置为 'error'，同时在 'Form.Item' 的子组件 'Input.Password' 中添加 'hasFeedback' 属性，使错误状态的图标显示出来。

修改后的代码如下：

<Form.Item 
  label={'原始密码'} 
  name={'oldPassword'} 
  rules={[{ required: true }]} 
  labelCol={{style:{width:110}}} 
  labelAlign='right'
>
  <Input.Password placeholder='请输入密码'/>
</Form.Item>
<Form.Item 
  label={'新密码'} 
  name={'newPassword'} 
  labelCol={{style:{width:110}}} 
  labelAlign='right'
  validateStatus={getFieldError('newPassword') ? 'error' : ''}
  help={getFieldError('newPassword') || ''}
  rules={[
    { required: true },
    { pattern: PASSWORD_REGEX, message: '正确的密码需要包含数字+字母（大小写均可）' },
    ({ getFieldValue }) => ({ 
      validator(_, value) { 
        if (getFieldValue('oldPassword') === value) { 
          return Promise.reject(new Error('新密码不能和原密码相同'));
        } 
        return Promise.resolve();
      }
    })
  ]}
>
  <Input.Password placeholder='请输入密码，8位以上数字+字母组合' hasFeedback/>
</Form.Item>

这样，当新旧密码相同时，'validateStatus' 将为 'error'，并且校验错误的提示信息将显示在 'help' 属性中。