前端手机号校验逻辑开发求助：如何拦截未在系统数据库中的用户继续后续流程

First, let's spot the core issue in your current code: you're treating an asynchronous service call as a synchronous operation. The registerService.checkUser(this.msisdn) is almost certainly returning an Observable (since you're using RxJS elsewhere with subscribe), so comparing it directly to this.msisdn will never work as expected—it's comparing a phone number string to an Observable object, not the actual response from your backend.

Here's how to rewrite your logic to match your requirements:

Step 1: Update the checkUser Method to Handle Async Validation #

We need to properly subscribe to the checkUser service call, then act on the response:

checkUser() {
  // First, validate that a phone number was entered
  if (!this.msisdn) {
    this.toastr.warning('Please enter a phone number', 'Missing input!');
    return;
  }

  // Call the backend service to check if the user exists
  this.registerService.checkUser(this.msisdn).subscribe({
    next: (userExists) => {
      if (userExists) {
        // User is in the database: proceed with sending verification SMS
        console.log('User found in system database');
        this.sendSms(1);
      } else {
        // User not found: show warning and block further actions
        console.log('User not found in system database');
        this.toastr.warning('您未在我们的系统数据库中', '验证失败!');
        this.showSmsCode = false; // Hide SMS input to prevent unwanted steps
      }
    },
    error: (err) => {
      // Handle network or backend errors gracefully
      console.error('Error verifying user:', err);
      this.toastr.error('Failed to check your phone number', 'Error!');
    }
  });
}

sendSms(i: number) {
  this.auth.sendSms({ msisdn: this.msisdn }).subscribe({
    next: (res) => {
      if (i === 1) {
        amplitude.getInstance().logEvent("sms resent");
      }
      this.showSmsCode = true;
    },
    error: (err) => {
      console.error('Error sending SMS code:', err);
      this.toastr.error('Failed to send verification code', 'Error!');
    }
  });
}

Key Changes Explained #

• Async Handling: We now subscribe to registerService.checkUser instead of trying to compare its return value directly. This lets us wait for the backend response before making decisions.
• Clear Flow Control:
  • If the user exists: Proceed to send the verification SMS and show the SMS code input field.
  • If the user does NOT exist: Show your desired warning message, and explicitly set showSmsCode = false to block the user from proceeding further.
• Input Guard: Added a check for empty msisdn to handle cases where the user hasn't entered a phone number yet.
• Error Resilience: Added error callbacks to both subscriptions to handle network failures or backend errors gracefully—this prevents silent failures and keeps users informed.

Important Note About registerService.checkUser #

Ensure your backend service method returns an Observable that emits a clear signal of whether the user exists. For example:

// Inside your RegisterService
checkUser(msisdn: string): Observable<boolean> {
  return this.http.get<boolean>(`/api/users/check/${msisdn}`);
}

This assumes your backend returns true if the user exists, false otherwise. Adjust the next callback logic if your backend returns a different structure (like a user object or null).

内容的提问来源于stack exchange，提问作者Olzhas Sagyndyk