Javascript 显示一些错误消息，指出指向特定输入字段的参数错误

如果验证后发现特定输入字段不正确，例如“输入值错误”，如何显示指向该字段的消息（有焦点或无焦点）

我知道这是一个非常幼稚的问题，但却无法找到答案

---

谢谢。

您的标记包含jQuery，因此这里有一个方法：

步骤1:下载jQuery并将其包含到项目中，或者从cdn中包含它

步骤2:包括jQuery验证插件

第3步：HTML表单。（示例）

步骤5:用于验证的jQuery脚本

$(function() {
  $("form[name='registration']").validate({
    // Specify validation rules
    rules: {
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Specify validation error messages
    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: "Please enter a valid email address"
    },
    submitHandler: function(form) {
      form.submit();
    }
  });
});

更新：回复评论

预期产出：

---

注意：如果您需要更多的错误消息样式，请编辑CSS。

您使用的是什么代码？请输入一些代码片段，显示您已经尝试过的内容，以便我们提供帮助。不要提出这样的一般性问题。Stackoverflow不是一个“如何”的教程服务。像这样的问题太宽泛了。请见谅，因为我是新手，不会发布这样的一般性问题。在我的代码中，我使用javascript应用了简单的验证，我认为我应该简单地询问如何在不发布代码的情况下执行此操作。谢谢@Saurabh，我尝试了您的代码，但如果它不正确，它只指向电子邮件字段。如何处理其他字段？该代码应适用于表单中指定的所有字段（名字、姓氏、电子邮件和密码）。检查开发人员控制台中是否有任何错误。我已经在控制台中检查了它，它显示“UncaughtTypeError:$（…）。验证不是HTMLDocument中的函数。（file.html？firstname=&lastname=&email=kkkgkg%40gm.og&password=：15）在n（jquery.min.js:2）在Object.fireWith（jquery.min.js:2）在function.ready（jquery.min.js:2）在HTMLDocument.B（jquery.min.js:2）”中。我只是复制了你的代码并添加了你提供的库。那么如何重新喜欢它呢？首先你需要包括

jquery.min.js

，然后是

jquery.validate.min.js

，然后是上面提到的jquery代码。检查它在项目中的顺序是否正确。谢谢，我没有包括jquery.validate.min.js，但是现在它工作正常，只是在不正确的字段下聚焦并显示错误消息，但我想像我在问题中提到的那样。

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans";
  font-size: 14px;
}

.container {
  width: 500px;
  margin: 25px auto;
}

form {
  padding: 20px;
  background: #2c3e50;
  color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
form label,
form input,
form button {
  border: 0;
  margin-bottom: 3px;
  display: block;
  width: 100%;
}
form input {
  height: 25px;
  line-height: 25px;
  background: #fff;
  color: #000;
  padding: 0 6px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
form button {
  height: 30px;
  line-height: 30px;
  background: #e67e22;
  color: #fff;
  margin-top: 10px;
  cursor: pointer;
}
form .error {
  color: #ff0000;
}

$(function() {
  $("form[name='registration']").validate({
    // Specify validation rules
    rules: {
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Specify validation error messages
    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: "Please enter a valid email address"
    },
    submitHandler: function(form) {
      form.submit();
    }
  });
});