使用jQuery.Validate显示正确的面板

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.19.3/jquery.validate.min.js"></script>

<form id="myForm">
  <input type="text" name="username" required minlength="5" maxlength="20" placeholder="用户名">
  <input type="password" name="password" required minlength="8" placeholder="密码">
  <button type="submit">提交</button>
</form>

$(document).ready(function() {
  $("#myForm").validate({
    // 设置验证规则和提示信息
    rules: {
      username: {
        required: true,
        minlength: 5,
        maxlength: 20
      },
      password: {
        required: true,
        minlength: 8
      }
    },
    messages: {
      username: {
        required: "请输入用户名",
        minlength: "用户名长度不能少于5个字符",
        maxlength: "用户名长度不能超过20个字符"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能少于8个字符"
      }
    },
    // 验证通过时的回调函数
    success: function(label) {
      label.addClass("valid").text("正确");
    }
  });
});