Nhập số điện thoại php

❮ Thuộc tính kiểu HTML

Thí dụ

Xác định trường để nhập số điện thoại

Nhập số điện thoại của bạn

Tự mình thử »

---

Định nghĩa và cách sử dụng

xác định một trường để nhập số điện thoại

Ghi chú. Các trình duyệt không hỗ trợ "tel" trở lại là đầu vào "văn bản" tiêu chuẩn

Mẹo. Luôn thêm thẻ để có các phương pháp tiếp cận tốt nhất

---

Hỗ trợ trình duyệt

Attributetype="tel"Yes10. 0CóCó11. 0

---

cú pháp

---

❮ Thuộc tính kiểu HTML

Trước đây mình đã từng đặt câu hỏi thế này trên Viblo. https. //viblo. asia/q/laravel-login-su-dung-so-dien-thoai-khong-can-ma-nuoc-jeZ1eo1YZWz. Ngày đó mình vẫn thắc mắc rằng không biết hệ thống người ta lưu trữ số điện thoại kiểu gì để có thể vừa đăng nhập được khi nhập mã vùng hoặc không nhập mã vùng. Ví dụ nhập +840981234789 hoặc 0981234789 hoặc 840981234789 thì tất cả các đăng nhập đều được. Và sau một thời gian tìm hiểu và nghiên cứu mình cũng đã tìm ra giải pháp cho vấn đề này và chủ đề này mình sẽ chia sẻ với các bạn. Start đầu hủy bỏ

Thiết kế cơ sở dữ liệu

Để lưu trữ số điện thoại trong DB ta cần lưu mã vùng (+84), mã code (VN) và số quốc gia (0981234789). Như vậy ta sẽ tạo ra 1 bảng là phone_numbers để lưu trữ số điện thoại. Bảng này sẽ có các trường là region_code,

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePhoneNumbersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('phone_numbers', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('user_id');
            $table->string('region_code');
            $table->string('country_code');
            $table->string('national_number');
            $table->string('e164_format');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('phone_numbers');
    }
}

0,

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePhoneNumbersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('phone_numbers', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('user_id');
            $table->string('region_code');
            $table->string('country_code');
            $table->string('national_number');
            $table->string('e164_format');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('phone_numbers');
    }
}

1 và 1 trường nữa được gọi là

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePhoneNumbersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('phone_numbers', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('user_id');
            $table->string('region_code');
            $table->string('country_code');
            $table->string('national_number');
            $table->string('e164_format');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('phone_numbers');
    }
}

2 là định dạng số điện thoại có đầy đủ mã vùng và số quốc gia ví dụ

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePhoneNumbersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('phone_numbers', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('user_id');
            $table->string('region_code');
            $table->string('country_code');
            $table->string('national_number');
            $table->string('e164_format');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('phone_numbers');
    }
}

3 Để demo cho chức năng này ta tạo các lần di chuyển như sau

bảng người dùng

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

bảng số điện thoại

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePhoneNumbersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('phone_numbers', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('user_id');
            $table->string('region_code');
            $table->string('country_code');
            $table->string('national_number');
            $table->string('e164_format');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('phone_numbers');
    }
}

Số điện thoại libphone của Google và Điện thoại của Laravel

Tiếp theo để hỗ trợ chúng tôi trong quá trình phân tích cú pháp, định dạng, xác thực số điện thoại của các quốc gia trên thế giới, chúng tôi sẽ nhờ đến 1 thư viện của Google đó là https. //github. com/googlei18n/libphonenumber. Rất tiếc thư viện này lại không hỗ trợ PHP.

Nhưng đừng lắng nghe vì đã có người viết lại thư viện này trên PHP. Đó là https. //github. com/giggsey/libphonenumber-for-php. Giờ ta hãy xem nó làm được gì nào. Với đầu vào là mã quốc gia 2 ký tự và số quốc gia ta thấy thư viện này làm được nhiều thứ hay ho. Đã chuyển đổi sang các định dạng khác như E164, định dạng số quốc tế. đồng thời còn có vaidation xem số có hợp lệ không còn xem nó là dạng số di động hay máy bàn nữa, tiện lợi quá. Vì vậy, tiếp tục theo ta chỉ cần làm một màn hình đăng ký số điện thoại cho phép người dùng nhập vào mã vùng quốc gia và số quốc gia là mọi thứ đơn giản hơn rất nhiều rồi. thêm 1 phút nữa. thư viện này đã được tích hợp với Laravel qua gói Laravel Phone. Too ngon must not any

Tiếp theo ta sẽ nhờ Laravel để tạo các khung đăng ký đăng ký bằng câu lệnh

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePhoneNumbersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('phone_numbers', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('user_id');
            $table->string('region_code');
            $table->string('country_code');
            $table->string('national_number');
            $table->string('e164_format');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('phone_numbers');
    }
}

4. Sau đó ta cần sửa biểu mẫu đăng ký để có thể nhập số điện thoại. Tạm dừng tưởng tượng như sau. 1 hộp chọn cho phép chọn mã vùng chứa toàn bộ thông tin về mã vùng trên toàn thế giới. Và 1 ô nhập nữa cho phép nhập số điện thoại quốc gia. Để làm cái selectbox kia thì ta có nhiều cách. Nếu làm thủ công thì ta cần liệt kê mã quốc gia 2 ký tự của toàn bộ các nước trên thế giới

Gói đầu vào điện thoại quốc tế

Trong lúc đang suy nghĩ tự mày mò để làm bằng tay cái selectbox kia thì mình lại thử dạo 1 vòng google xem có ai làm sẵn chưa và đúng như mình nghĩ 1 thư viện tuyệt vời nữa lại hiện ra trước mắt. đầu vào điện thoại quốc tế. Để sử dụng thư viện này thì quá đơn giản các bạn có thể đọc tài liệu của nó. Sau đây là đoạn mã mình đã chỉnh sửa tại trang đăng ký

<div class="form-group row">
    <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('Phone number') }}</label>

    <div class="col-md-6">
        <input type="phone_number" class="form-control phone-number{{ $errors->has('phone_number') ? ' is-invalid' : '' }}" name="phone_number" value="{{ old('phone_number') }}" required>
        <input type="hidden" name="region_code">

        @if ($errors->has('phone_number'))
            <span class="invalid-feedback" role="alert">
                <strong>{{ $errors->first('phone_number') }}</strong>
            </span>
        @endif
    </div>
</div>


@section('style')
    <link href="{{ asset('css/intlTelInput.css') }}" rel="stylesheet">
@endsection

@section('script')
    <script src="{{ asset('js/intlTelInput.js') }}" defer></script>

    <script>
        $(function () {
            $('.phone-number').intlTelInput({
                initialCountry: "auto",
                geoIpLookup: function(callback) {
                    $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
                        var countryCode = (resp && resp.country) ? resp.country : "VN";
                        callback(countryCode);
                    });
                },
                preferredCountries: ['vn', 'us', 'jp']
            });

            $(".phone-number").on("countrychange", function(e, countryData) {
                $(this).parents('.form-group').find('.region-code').val(countryData.iso2);
            });
        });
    </script>
@endsection

Ta has results as after

Và bây giờ khi gửi biểu mẫu thì sẽ gửi đồng thời cả đầu vào hidden region_code lên máy chủ để xử lý lưu vào DB. Giả sử ta chọn Việt Nam và nhập số 0981 234 789 thì gửi lên server sẽ là phone_number = 0981234789 và region_code=VN

Và câu chuyện trên máy chủ sẽ diễn ra như sau

________số 8_______

Như vậy ta đã hoàn thành chức năng đăng ký sử dụng số điện thoại

Bây giờ để đăng nhập bằng số điện thoại chấp nhận các loại định dạng như bài toán ban đầu đặt ra thì dòng tiếp theo sẽ như sau. Người dùng nhập số điện thoại và mật khẩu (trường số điện thoại giờ chỉ còn 1 đầu vào chứ không chọn mã vùng như đăng ký nữa để cho phép người dùng nhập tự do) => dựa vào ip người dùng ta lấy ra . Và sử dụng thư viện LaravelPhone để phân tích số điện thoại của người dùng ở định dạng e164. Tiếp tục truy vấn vào bảng phone_numbers theo e164_format từ đó truy ra người dùng ở bảng user => Đăng nhập thành công. Đến đây mình xin phép chỉ viết ra flow và không đi chi tiết nữa vì nó khá dễ rồi phải không.

Kết bài

Như vậy với bài toán đơn giản là lưu số điện thoại thế nào để hợp lý vào Cơ sở dữ liệu mình đã giải quyết được bằng giải pháp trên. Nếu các bạn có ý tưởng gì hay ho cho vấn đề này thì chia sẻ thêm nhé. Bài viết đã quá dài rồi mình xin phép dừng lại tại đây. Xin cảm ơn các bạn đã theo dõi