Php 如何在运行时创建表单验证错误消息？

我已经搜索了几个小时，试图找到一种在用户键入时验证我的表单的方法。例如，我希望有一个邮政编码字段。我希望用户在提交表单之前，在字段下方看到一条消息，说明他们已超出此字段的字符限制。如何做到这一点

使用此类代码：

<form method="POST" name="wrriregistration" target="_blank"><center>
<table width="100%">
<tbody>
<tr>
<td width="149"><strong>*First Name:</strong></td>
<td width="229"><input type="text" name="first_name" size="35" maxlength="100"/></td>
<td width="123"><strong style="display:none;">Middle Initial:</strong></td>
<td width="659"><input style="display:none;" type="text" name="middle_initial" size="35" maxlength="50" /></td>
</tr>
</tbody>
</table>
</form>

*名字：
中间首字母：

试试这个：

HTML

<input type="text" name="first_name">
<div id="error">
    My custom error
</div>

JS

#error {
    display: none;
}

#error.show {
    display: block;
}

input {
    color: #000000;
}

.invalid {
    color: #FF0000;
}

var input = document.querySelector('[name="first_name"]');
var error = document.getElementById('error');

input.addEventListener('keydown', function(){
    // Whatever you want
    if(this.value.length >= 10) {
        this.classList.add('invalid');
        // You can control style of your invalid input with .invalid
        error.classList.add('show'); // Display your custom error
    } else {
        this.classList.remove('invalid');
        error.classList.remove('show');
    }
});

编辑说明：

var输入

以您的名字输入为目标

addEventListener

进行事件检测。通过参数“keydown”传递，JavaScript将侦听按下的键

classList

是一个用于操作类的API（IE不支持）

在这里试试：

试试这个：

HTML

<input type="text" name="first_name">
<div id="error">
    My custom error
</div>

JS

#error {
    display: none;
}

#error.show {
    display: block;
}

input {
    color: #000000;
}

.invalid {
    color: #FF0000;
}

var input = document.querySelector('[name="first_name"]');
var error = document.getElementById('error');

input.addEventListener('keydown', function(){
    // Whatever you want
    if(this.value.length >= 10) {
        this.classList.add('invalid');
        // You can control style of your invalid input with .invalid
        error.classList.add('show'); // Display your custom error
    } else {
        this.classList.remove('invalid');
        error.classList.remove('show');
    }
});

编辑说明：

var输入

以您的名字输入为目标

addEventListener

进行事件检测。通过参数“keydown”传递，JavaScript将侦听按下的键

classList

是一个用于操作类的API（IE不支持）

---

请在此处尝试：

这需要javascript，它不是php功能。

maxlength

属性将解决用户输入过多字符的问题。如果只是基于表单上的内容进行验证，那么您可以使用简单的Javascript，使用

keyup

、

keypress

或

change

事件检查字段。如果需要针对后端的某些内容进行验证，则需要使用AJAX。好的，谢谢。为什么呢您还可以解释一下为什么它不是php功能吗？对于完整的表单验证，您可能会看到这一点。为此，您需要javascript，它不是php功能。

maxlength

属性将解决用户试图输入太多字符的问题。如果只是基于表单上的内容进行验证，那么您可以使用简单的Javascript，使用

keyup

、

keypress

或

change

事件检查字段。如果需要针对后端的某些内容进行验证，则需要使用AJAX。好的，谢谢。为什么呢您还可以解释一下为什么它不是php功能吗？对于完整的表单验证，您可能会看到这一点。非常感谢您的回复，我将尝试一下。我已经用同样的实现阅读了上面的评论。如何获取其中一个字段的长度？很抱歉，您能否进一步解释如何实现？我尝试了很多方法，但都无法让它运行。我只是想提醒用户，当名称字段中的字符被超过时，非常感谢您的回复，我会尝试一下。我已经用同样的实现阅读了上面的评论。如何获取其中一个字段的长度？很抱歉，您能否进一步解释如何实现？我尝试了很多方法，但都无法让它运行。我只是想提醒用户，当名称字段超过字符时