Làm cách nào để giới hạn số điện thoại trong html?

Nếu bạn đã từng tra cứu "regex số điện thoại" và hối tiếc về điều đó, thì bạn đang ở đúng nơi. Có rất nhiều định dạng số điện thoại hợp lệ, nhưng may mắn thay, có những công cụ miễn phí mà bạn có thể sử dụng để giúp đảm bảo số điện thoại hợp lệ

Bài đăng này sẽ hướng dẫn hai cách để kiểm tra tính hợp lệ của số điện thoại. API Tra cứu Twilio và plugin JavaScript intl-tel-input. Điều này được xây dựng trên Cách xây dựng trường nhập số điện thoại quốc tế bằng HTML và JavaScript, bạn có thể tham khảo để biết thêm chi tiết về cách xây dựng trường nhập số điện thoại đẹp mắt mà tôi đang sử dụng bên dưới

Bạn có thể tìm thấy mã đã hoàn thành trên GitHub của tôi

Tại sao bạn nên xác thực đầu vào số điện thoại

Bạn muốn xác thực số điện thoại để bạn có thể giúp ngăn chặn đăng ký spam và gian lận, đồng thời phát hiện các lỗi đơn giản như lỗi chính tả. Cuối cùng, chúng tôi sẽ bao gồm các đề xuất về xác minh số điện thoại và một số phương pháp hay nhất về bảo mật tài khoản vì bạn cũng thường muốn đảm bảo rằng người dùng có quyền truy cập vào số điện thoại mà họ đang cung cấp, không chỉ vì đó là số hợp lệ

Thiết lập xác thực số điện thoại

Bạn có thể đã nhập số điện thoại, nhưng nếu bạn bắt đầu lại từ đầu, bạn có thể sử dụng trang HTML cơ bản chấp nhận đầu vào số điện thoại

Biểu mẫu này sử dụng plugin intl-tel-input xử lý đầu vào cho E quốc tế. tiêu chuẩn 164. Định dạng này được nhiều API sử dụng, bao gồm cả của Twilio, để đảm bảo đầu vào được tiêu chuẩn hóa và hỗ trợ toàn cầu. Bạn có thể đọc thêm về cách xây dựng trường nhập số điện thoại có thể cung cấp E. 164 trong bài đăng trên blog này

Đây là những gì tôi sẽ sử dụng để hiển thị các tùy chọn xác thực được mô tả bên dưới. Đặt cái này vào trong một tệp có tên index.html

  
    International telephone input
    
    
    
    
  
  
    

      
        
Enter your phone number:
        
        
      
      

      

    
  
  
    const phoneInputField = document.querySelector["#phone"];
    const phoneInput = window.intlTelInput[phoneInputField, {
      utilsScript:
        "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
    }];

    const info = document.querySelector[".alert-info"];
    const error = document.querySelector[".alert-error"];

    function process[event] {
      event.preventDefault[];

      const phoneNumber = phoneInput.getNumber[];

      info.style.display = "";
      info.innerHTML = `Phone number in E.164 format: ${phoneNumber}`;
    }
  

Để có các kiểu đẹp hơn, bạn có thể lấy biểu định kiểu từ GitHub của tôi và đặt nó vào tài liệu có tên styles.css trong cùng thư mục với index.html

Kiểm tra ứng dụng bằng cách tải tệp HTML trong trình duyệt web. Bạn sẽ nhận thấy rằng một số điện thoại không hợp lệ sẽ không gây ra bất kỳ lỗi nào

Hãy khắc phục điều đó

Cách xác thực số điện thoại

Có hai tùy chọn mà chúng tôi sẽ hướng dẫn để xác thực số điện thoại

1. Sử dụng API tra cứu Twilio
2. Sử dụng plugin intl-tel-input

Xác thực số điện thoại bằng Twilio Lookup API

Yêu cầu API Tra cứu Twilio là miễn phí và bạn có thể nhúng yêu cầu này vào bất kỳ chương trình phụ trợ nào bạn muốn. Chúng ta sẽ sử dụng các hàm JavaScript phi máy chủ của Twilio trong hướng dẫn này

• ưu. API tra cứu đã cập nhật dữ liệu hợp lệ của số điện thoại. Bạn cũng có thể sử dụng API để kiểm tra loại đường dây hoặc nhà cung cấp dịch vụ
• Nhược điểm. Đó là nhiều mã hơn và yêu cầu mạng

Đối với phần này, bạn sẽ cần có tài khoản Twilio - đăng ký miễn phí. Chuyển đến bảng điều khiển Twilio và tạo một dịch vụ chức năng, tôi gọi là của tôi là intl-tel-input

Thêm một chức năng và gọi nó là lookup

Đảm bảo rằng bạn đặt loại chức năng thành "công khai", điều này là cần thiết vì chúng tôi sẽ gọi chức năng này bên ngoài Twilio

Thay thế mã bằng cách sau

function errorStr[errors] {
  return errors
    .map[[err] => {
      return err.replaceAll["_", " "].toLowerCase[];
    }]
    .join[", "];
}

exports.handler = function [context, event, callback] {
 const response = new Twilio.Response[];
 response.appendHeader["Content-Type", "application/json"];
 response.appendHeader['Access-Control-Allow-Origin', '*'];
 response.appendHeader['Access-Control-Allow-Methods', 'POST, OPTIONS'];
 response.appendHeader['Access-Control-Allow-Headers', 'Content-Type'];

 if [typeof event.phone === "undefined"] {
   response.setBody[{
     success: false,
     error: "Missing parameter; please provide a phone number.",
   }];
   response.setStatusCode[400];
   return callback[null, response];
 }

 const client = context.getTwilioClient[];
 const lookup = await client.lookups.v2.phoneNumbers[event.phone].fetch[];

 if [lookup.valid] {
      response.setStatusCode[200];
      response.setBody[{
        success: true,
      }];
      callback[null, response];
    } else {
      response.setStatusCode[400];
      response.setBody[{
        success: false,
        error: `Invalid phone number ${event.phone}: ${errorStr[
          lookup.validationErrors
        ]}`,
      }];
      callback[null, response];
    }
  } catch [error] {
    console.error[error];
    response.setStatusCode[error.status];
    response.setBody[{
      success: false,
      error: "Something went wrong.",
    }];
    callback[null, response];
  }
};

Hàm này sẽ tra cứu số điện thoại và trả về "success. true" nếu API xác định nó hợp lệ và "false" nếu nó xác định nó không hợp lệ. Trong trường hợp số điện thoại không hợp lệ, hàm cũng sẽ trả về danh sách các lý do được phân tách bằng dấu phẩy như "quá ngắn", "quá dài", "mã quốc gia không hợp lệ" hoặc "không phải là số"

Nhấn "Triển khai tất cả" ở dưới cùng

You can test your function in the browser by adding a query parameter: //.twil.io/lookup?phone=+18448144627

Bạn sẽ thấy {"success":true}

Bây giờ hãy gọi nó từ ứng dụng của chúng ta

Thay thế hàm

function errorStr[errors] {
  return errors
    .map[[err] => {
      return err.replaceAll["_", " "].toLowerCase[];
    }]
    .join[", "];
}

exports.handler = function [context, event, callback] {
 const response = new Twilio.Response[];
 response.appendHeader["Content-Type", "application/json"];
 response.appendHeader['Access-Control-Allow-Origin', '*'];
 response.appendHeader['Access-Control-Allow-Methods', 'POST, OPTIONS'];
 response.appendHeader['Access-Control-Allow-Headers', 'Content-Type'];

 if [typeof event.phone === "undefined"] {
   response.setBody[{
     success: false,
     error: "Missing parameter; please provide a phone number.",
   }];
   response.setStatusCode[400];
   return callback[null, response];
 }

 const client = context.getTwilioClient[];
 const lookup = await client.lookups.v2.phoneNumbers[event.phone].fetch[];

 if [lookup.valid] {
      response.setStatusCode[200];
      response.setBody[{
        success: true,
      }];
      callback[null, response];
    } else {
      response.setStatusCode[400];
      response.setBody[{
        success: false,
        error: `Invalid phone number ${event.phone}: ${errorStr[
          lookup.validationErrors
        ]}`,
      }];
      callback[null, response];
    }
  } catch [error] {
    console.error[error];
    response.setStatusCode[error.status];
    response.setBody[{
      success: false,
      error: "Something went wrong.",
    }];
    callback[null, response];
  }
};

function errorStr[errors] {
  return errors
    .map[[err] => {
      return err.replaceAll["_", " "].toLowerCase[];
    }]
    .join[", "];
}

exports.handler = function [context, event, callback] {
 const response = new Twilio.Response[];
 response.appendHeader["Content-Type", "application/json"];
 response.appendHeader['Access-Control-Allow-Origin', '*'];
 response.appendHeader['Access-Control-Allow-Methods', 'POST, OPTIONS'];
 response.appendHeader['Access-Control-Allow-Headers', 'Content-Type'];

 if [typeof event.phone === "undefined"] {
   response.setBody[{
     success: false,
     error: "Missing parameter; please provide a phone number.",
   }];
   response.setStatusCode[400];
   return callback[null, response];
 }

 const client = context.getTwilioClient[];
 const lookup = await client.lookups.v2.phoneNumbers[event.phone].fetch[];

 if [lookup.valid] {
      response.setStatusCode[200];
      response.setBody[{
        success: true,
      }];
      callback[null, response];
    } else {
      response.setStatusCode[400];
      response.setBody[{
        success: false,
        error: `Invalid phone number ${event.phone}: ${errorStr[
          lookup.validationErrors
        ]}`,
      }];
      callback[null, response];
    }
  } catch [error] {
    console.error[error];
    response.setStatusCode[error.status];
    response.setBody[{
      success: false,
      error: "Something went wrong.",
    }];
    callback[null, response];
  }
};

function process[event] {
 event.preventDefault[];

 const phoneNumber = phoneInput.getNumber[];

 info.style.display = "none";
 error.style.display = "none";

 const data = new URLSearchParams[];
 data.append["phone", phoneNumber];

 fetch["//.twil.io/lookup", {
   method: "POST",
   body: data,
 }]
   .then[[response] => response.json[]]
   .then[[json] => {
     if [json.success] {
       info.style.display = "";
       info.innerHTML = `Phone number in E.164 format: ${phoneNumber}`;
     } else {
       console.error[json.error];
       error.style.display = "";
       error.innerHTML =  json.error;
     }
   }]
   .catch[[err] => {
     error.style.display = "";
     error.innerHTML = `Something went wrong: ${err}`;
   }];
}

Bây giờ nếu bạn cố nhập số không hợp lệ, bạn sẽ thấy thông báo lỗi và lý do tương ứng

Xác thực số điện thoại bằng plugin intl-tel-input

Làm theo hướng dẫn trong bài đăng này hoặc trong tài liệu plugin để thêm intl-tel-input vào trang web của bạn hoặc sử dụng mã HTML được cung cấp ở trên. Ngoài việc xây dựng các biểu mẫu nhập liệu đẹp mắt, plugin intl-tel-input còn cung cấp trình bao bọc xung quanh libphonenumber của Google để giúp phát hiện các số điện thoại hợp lệ và không hợp lệ

• ưu. Ít mã hơn, đặc biệt nếu bạn đang sử dụng plugin để nhập số điện thoại
• Nhược điểm. Số điện thoại hợp lệ thay đổi và bạn sẽ dựa vào các bản cập nhật plugin để nắm bắt các bản cập nhật trong libphonenumber. Bạn có thể khóa một số người dùng hợp lệ

Thay thế mã chức năng

function errorStr[errors] {
  return errors
    .map[[err] => {
      return err.replaceAll["_", " "].toLowerCase[];
    }]
    .join[", "];
}

exports.handler = function [context, event, callback] {
 const response = new Twilio.Response[];
 response.appendHeader["Content-Type", "application/json"];
 response.appendHeader['Access-Control-Allow-Origin', '*'];
 response.appendHeader['Access-Control-Allow-Methods', 'POST, OPTIONS'];
 response.appendHeader['Access-Control-Allow-Headers', 'Content-Type'];

 if [typeof event.phone === "undefined"] {
   response.setBody[{
     success: false,
     error: "Missing parameter; please provide a phone number.",
   }];
   response.setStatusCode[400];
   return callback[null, response];
 }

 const client = context.getTwilioClient[];
 const lookup = await client.lookups.v2.phoneNumbers[event.phone].fetch[];

 if [lookup.valid] {
      response.setStatusCode[200];
      response.setBody[{
        success: true,
      }];
      callback[null, response];
    } else {
      response.setStatusCode[400];
      response.setBody[{
        success: false,
        error: `Invalid phone number ${event.phone}: ${errorStr[
          lookup.validationErrors
        ]}`,
      }];
      callback[null, response];
    }
  } catch [error] {
    console.error[error];
    response.setStatusCode[error.status];
    response.setBody[{
      success: false,
      error: "Something went wrong.",
    }];
    callback[null, response];
  }
};

function process[event] {
 event.preventDefault[];

 const phoneNumber = phoneInput.getNumber[];

 info.style.display = "none";
 error.style.display = "none";

 if [phoneInput.isValidNumber[]] {
   info.style.display = "";
   info.innerHTML = `Phone number in E.164 format: ${phoneNumber}`;
 } else {
   error.style.display = "";
   error.innerHTML = `Invalid phone number.`;
 }
}

Kết quả phải giống với phiên bản API tra cứu

Cả hai đều là các tùy chọn chắc chắn để xác thực số điện thoại, tôi sẵn sàng sử dụng API tra cứu vì có thể bạn sẽ thực hiện yêu cầu API vào thời điểm này để bắt đầu xác minh số điện thoại và lưu trữ người dùng trong cơ sở dữ liệu của bạn

Các phương pháp hay nhất để bảo mật tài khoản

Xác thực số điện thoại chỉ là một cách giúp ngăn chặn gian lận và đảm bảo bạn đang bảo vệ ứng dụng của mình cũng như dữ liệu của người dùng

Tôi luôn khuyên bạn nên xác minh số điện thoại - bạn có thể thực hiện việc này theo một số cách nhưng gửi mật mã một lần [OTP] tới số điện thoại là một cách tuyệt vời để đảm bảo quyền sở hữu trong lần đầu tiên người dùng cung cấp thông tin này. Điều này giúp bảo vệ chống lại cả lỗi chính tả đơn giản và người dùng nhập số mà họ không sở hữu. Hãy xem dự án này trên Twilio Code Exchange để tìm hiểu thêm về cách triển khai OTP với API xác minh Twilio