Thứ Năm, 30 tháng 10, 2025

HTML + JavaScript (chỉ cho phép số, không text, kiểm tra đủ 10 số)

✅ form.php

<script type="text/javascript">

// Chạy khi người dùng nhập

function checkPhoneNumber(input) {

    // Loại bỏ mọi ký tự không phải số

    var value = input.value.replace(/[^0-9]/g, '');

    input.value = value;

    var error = document.getElementById('error');

    if (value.length === 0) {

        error.innerHTML = "❌ Vui lòng nhập số điện thoại (chỉ chứa số).";

        error.style.color = "red";

        input.style.border = "1px solid red";

    } else if (isNaN(value)) {

        error.innerHTML = "❌ Chỉ được nhập số, không được nhập chữ.";

        error.style.color = "red";

        input.style.border = "1px solid red";

    } else if (value.length < 10) {

        error.innerHTML = "⚠️ Số điện thoại phải đủ 10 chữ số (" + value.length + "/10)";

        error.style.color = "orange";

        input.style.border = "1px solid orange";

    } else if (value.length > 10) {

        error.innerHTML = "❌ Chỉ được nhập tối đa 10 chữ số!";

        error.style.color = "red";

        input.style.border = "1px solid red";

        input.value = value.substring(0, 10); // cắt về 10 số

    } else {

        error.innerHTML = "✅ Hợp lệ!";

        error.style.color = "green";

        input.style.border = "1px solid green";

    }

}

</script>

<form action="xu_ly.php" method="post">

    <label>Nhập số điện thoại (10 chữ số):</label><br>

    <input type="text" name="phone" maxlength="10" onkeyup="checkPhoneNumber(this)" />

    <div id="error" style="margin-top:5px;font-size:14px;color:red;"></div>

    <br>

    <input type="submit" value="Gửi">

</form>

✅ PHP kiểm tra lại (xu_ly.php)

if ($_SERVER['REQUEST_METHOD'] == 'POST') { $phone = isset($_POST['phone']) ? trim($_POST['phone']) : ''; // Kiểm tra chỉ chứa 10 chữ số if (!preg_match('/^[0-9]{10}$/', $phone)) { die('❌ Lỗi: Số điện thoại phải là 10 chữ số và không được chứa ký tự khác!'); } else { echo '✅ Số điện thoại hợp lệ: ' . htmlspecialchars($phone); } }

Không có nhận xét nào:

Đăng nhận xét