Laravel中如何为手机号输入框添加国家码列表并实现Ajax提交

一、准备国家码数据 #

在控制器中定义常用国家码数组，传递到视图（也可直接在前端硬编码，根据需求选择）：

// 示例控制器方法
public function showPhoneForm()
{
    $countryCodes = [
        ['code' => '+86', 'name' => '中国'],
        ['code' => '+1', 'name' => '美国'],
        ['code' => '+44', 'name' => '英国'],
        ['code' => '+81', 'name' => '日本'],
        // 按需添加更多国家码
    ];
    return view('phone-form', compact('countryCodes'));
}

二、前端渲染手机号输入组件 #

在Blade视图中使用flex布局实现输入框与国家码下拉框的一体化样式：

<form id="phoneSubmitForm">
    @csrf
    <div style="display: flex; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; width: 350px;">
        <select name="country_code" id="countryCode" style="border: none; padding: 10px 12px; background-color: #f8f9fa; cursor: pointer; min-width: 120px;">
            @foreach($countryCodes as $code)
                <option value="{{ $code['code'] }}">{{ $code['name'] }} ({{ $code['code'] }})</option>
            @endforeach
        </select>
        <input type="tel" name="phone_number" id="phoneNumber" placeholder="请输入手机号" 
               style="border: none; flex: 1; padding: 10px 12px; outline: none;">
    </div>
    <button type="submit" style="margin-top: 12px; padding: 10px 20px; background-color: #0d6efd; color: #fff; border: none; border-radius: 4px; cursor: pointer;">提交</button>
    <div id="feedbackMsg" style="margin-top: 12px; font-size: 14px;"></div>
</form>

三、Ajax提交逻辑实现 #

引入jQuery后编写表单提交的Ajax处理脚本：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function() {
    $('#phoneSubmitForm').on('submit', function(e) {
        e.preventDefault();
        const formData = $(this).serialize();
        
        $.ajax({
            url: "{{ route('phone.submit') }}",
            type: 'POST',
            data: formData,
            success: function(res) {
                $('#feedbackMsg').text(res.msg).css('color', '#198754');
                $('#phoneNumber').val('');
            },
            error: function(xhr) {
                const errMsg = xhr.responseJSON?.msg || '提交失败，请稍后重试';
                $('#feedbackMsg').text(errMsg).css('color', '#dc3545');
            }
        });
    });
});
</script>

四、后端路由与处理逻辑 #

1. 添加路由（routes/web.php）：

use App\Http\Controllers\PhoneController;

Route::post('/phone/submit', [PhoneController::class, 'handleSubmit'])->name('phone.submit');

2. 编写控制器处理方法：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;

class PhoneController extends Controller
{
    public function handleSubmit(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'country_code' => 'required|string',
            'phone_number' => 'required|string|min:8|max:15',
            // 可针对特定国家添加更严格的验证，比如中国手机号：'regex:/^1[3-9]\d{9}$/'
        ]);

        if ($validator->fails()) {
            return response()->json(['msg' => $validator->errors()->first()], 400);
        }

        // 此处添加业务逻辑，比如存储手机号、发送验证码等
        // 示例：\App\Models\UserPhone::create($request->only('country_code', 'phone_number'));

        return response()->json(['msg' => '手机号提交成功！']);
    }
}

可选优化 #

• 如果需要从数据库动态加载国家码，可新增接口返回国家码列表，前端通过Ajax请求后生成下拉选项
• 可添加手机号格式实时验证，提升用户体验

内容的提问来源于stack exchange，提问作者Asif Ayub