Change password, confirm password verification antd

Code implementation

<Form ref={
    form => this.form = form} onFinish={
    this.handleOk} initialValues={
    {
     id }}>
    <FormElement type="hidden" name="id" />
    <FormElement
        label=" New password "
        type="password"
        name="password"
        required
        rules={
    [{
    
            pattern:
                /^(?![^a-zA-Z]+$)(?!\\D+$).{8,16}$/,
            message: "8-16 Bit character , Must include letters and numbers ",
        }]}
    />
    <FormElement
        label=" Confirm the password "
        type="password"
        name="reNewPassword"
        dependencies={
    ['password']}
        required
        rules={
    [
            ({
      getFieldValue }) => ({
    
                validator(rule, value) {
    
                    if (!value || getFieldValue('password') === value) {
    
                        return Promise.resolve();
                    }
                    return Promise.reject(' The new password is different from confirming the new password ！');
                },
            }),
        ]}
    />
</Form>

Knowledge point 1 ： dependencies

Use... When there is a dependency between fields . If a field is set dependencies attribute . When the fields it depends on are updated , This field will automatically trigger the update and verification . A common scene , It's about registering user forms “ password ” And “ Confirm the password ” Field .“ Confirm the password ” Verification depends on “ password ” Field , Set up dependencies after ,“ password ” Field update will trigger again “ Check the password ” The verification logic of .

Knowledge point two ： getFieldValue

Knowledge point three ：validator

Customize validator There is no effect
This is because of your validator There are errors that lead to callback It didn't work out to . You can choose to go through async Return to one promise Or use try…catch Error trapping ：

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

// or

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