PHP数字输入表单优化：限制仅输入数字并添加错误提示

要实现表单仅允许数字输入并在输入文字时显示错误提示，需要前端限制+后端验证双重保障（前端可被绕过，后端验证是核心），以下是优化后的完整代码：

<?php
function maxGetal($getal1, $getal2)
{
    if ($getal1 > $getal2) {
        return $getal1;
    } elseif ($getal2 > $getal1) {
        return $getal2;
    } else {
        return "gelijk";
    }
}

$error = '';
$result = '';

if (isset($_POST["submit"])) {
    $eerstegetal = trim($_POST["eerstegetal"]);
    $tweedegetal = trim($_POST["tweedegetal"]);

    // 后端验证：检查是否为有效数字
    if (!is_numeric($eerstegetal) || !is_numeric($tweedegetal)) {
        $error = '<span style="color: red;">不能在表单中输入文字</span>';
    } else {
        // 转换为数值类型
        $num1 = doubleval($eerstegetal);
        $num2 = doubleval($tweedegetal);
        $result = maxGetal($num1, $num2);
    }
}
?>

<form action="" method="post">
    <input type="number" name="eerstegetal" placeholder="Eerste getal" step="any" required pattern="[0-9.]+" title="请输入有效数字"><br>
    <input type="number" name="tweedegetal" placeholder="Tweede getal" step="any" required pattern="[0-9.]+" title="请输入有效数字"><br>
    <input type="submit" name="submit" value="Bereken hoogste getal">
    <p>-----------------------------------------------------------------------</p>
</form>

<?php
// 显示错误提示或结果
if (!empty($error)) {
    echo $error;
} elseif (!empty($result)) {
    echo $result;
}
?>

关键优化点说明： #

1. 前端输入限制

   • 将input类型从text改为number，浏览器会自动弹出数字键盘（移动端友好），并阻止非数字字符输入；
   • 添加pattern="[0-9.]+"强制输入格式为数字（包含小数），title属性用于鼠标悬停时的提示；
   • step="any"支持输入任意小数，required确保用户不能提交空表单。

2. 后端安全验证

   • 使用trim()去除输入前后空格，避免空格导致的验证错误；
   • 用is_numeric()检查输入是否为有效数字，确保前端绕过的情况下仍能拦截非数字输入；
   • 错误提示用红色字体突出，提升用户感知；
   • 仅在验证通过后才调用maxGetal函数计算最大值，避免无效输入进入逻辑。

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