如何使用jQuery在每个文本框下方显示验证消息？

您可以将静态元素放在字段之后并显示它们，也可以动态注入验证消息。请参阅以下示例，了解如何动态注入。

此示例还遵循将焦点设置为空白字段的最佳做法，因此用户可以轻松地解决问题。

请注意，您可以轻松地将其通用化以与任何标签和字段一起使用（无论如何对于必填字段），而不是我的示例专门为每个验证编写代码。

编码：

$('form').on('submit', function (e) {    var focusSet = false;    if (!$('#email').val()) {        if ($("#email").parent().next(".validation").length == 0) // only add if not added        { $("#email").parent().after("<div  style='color:red;margin-bottom: 20px;'>Please enter email address</div>");        }        e.preventDefault(); // prevent form from POST to server        $('#email').focus();        focusSet = true;    } else {        $("#email").parent().next(".validation").remove(); // remove it    }    if (!$('#password').val()) {        if ($("#password").parent().next(".validation").length == 0) // only add if not added        { $("#password").parent().after("<div  style='color:red;margin-bottom: 20px;'>Please enter password</div>");        }        e.preventDefault(); // prevent form from POST to server        if (!focusSet) { $("#password").focus();        }    } else {        $("#password").parent().next(".validation").remove(); // remove it    }});

CSS：

    .validation    {      color: red;      margin-bottom: 20px;    }