如何通过Ajax限制textarea仅允许输入指定词汇？

要实现这个需求，核心是前端将输入内容传给后端校验，后端对照预设词汇列表判断合法性，再把结果返回给前端提示用户。以下是完整的代码示例：

后端校验（PHP） #

后端负责接收输入内容，用正则匹配确保输入仅由指定词汇组成（支持带空格的词汇，比如"my life"）：

<?php
// 预设允许的词汇列表
$allowedWords = ["job","personel","human","hello","system","hobby","my life"];

// 获取前端传入的内容
$input = isset($_POST['content']) ? trim($_POST['content']) : '';

// 构建正则规则：确保输入完全由允许的词汇（可重复，空格分隔）组成
// 转义词汇中的正则特殊字符，避免匹配出错
$escapedWords = array_map('preg_quote', $allowedWords);
$pattern = '/^(' . implode('|', $escapedWords) . ')(\s+(' . implode('|', $escapedWords) . '))*$/';

// 执行匹配校验
$isValid = preg_match($pattern, $input);

// 返回JSON格式的校验结果
header('Content-Type: application/json');
echo json_encode([
    'valid' => $isValid,
    'message' => $isValid ? '输入合法' : '请仅输入指定词汇：' . implode(', ', $allowedWords)
]);
?>

前端交互（HTML + 原生JS） #

前端监听输入事件，通过Ajax发送内容到后端，并根据返回结果显示错误提示：

<textarea id="inputArea" rows="5" cols="50" placeholder="请输入指定词汇"></textarea>
<p id="errorTip" style="color: red; display: none;"></p>

<script>
const textarea = document.getElementById('inputArea');
const errorTip = document.getElementById('errorTip');

// 实时监听输入（也可改用blur事件，在输入完成后校验）
textarea.addEventListener('input', function() {
    const content = this.value.trim();

    // 内容为空时隐藏提示
    if (!content) {
        errorTip.style.display = 'none';
        return;
    }

    // 创建Ajax请求
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'validate.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    xhr.onload = function() {
        if (xhr.status === 200) {
            const result = JSON.parse(xhr.responseText);
            if (!result.valid) {
                errorTip.textContent = result.message;
                errorTip.style.display = 'block';
            } else {
                errorTip.style.display = 'none';
            }
        }
    };

    // 发送请求，编码内容避免乱码
    xhr.send('content=' + encodeURIComponent(content));
});
</script>

关键细节说明 #

• 正则匹配：^和$确保整个输入内容都在校验范围内，防止输入包含非法词汇；preg_quote转义词汇中的特殊字符（如*、.），避免正则匹配出错。
• 事件选择：input事件是实时校验，用户每输入一个字符就触发；若觉得频繁，可换成blur事件，仅当textarea失去焦点时校验。
• 分隔符扩展：如果需要支持逗号等其他分隔符，可将正则中的\s+修改为[\s,]+，按需调整即可。

内容的提问来源于stack exchange，提问作者Efkan Faydalı