jQuery Validate页面加载时预验证输入框的实现难题

嘿，我刚好之前也遇到过一模一样的问题！其实不用折腾模拟focus()和blur()这种容易导致页面滚动的方法，jQuery Validate本身就提供了原生的方式，能让你在页面加载完成后立刻触发验证并显示错误信息。

核心解决方案：调用valid()方法 #

初始化验证器之后，直接调用表单的valid()方法就可以触发全表单的验证，它会自动检查所有带验证规则的输入框，并显示对应的错误提示，而且完全不会导致页面滚动。

示例代码：

// 初始化表单验证
$('#my-form').validate({
  rules: {
    username: { required: true, minlength: 5 },
    email: { required: true, email: true },
    password: { required: true, minlength: 8 }
    // 你的其他验证规则
  },
  messages: {
    username: { 
      required: "请填写用户名", 
      minlength: "用户名长度不能少于5个字符" 
    },
    email: "请输入有效的邮箱地址",
    password: "密码长度不能少于8个字符"
    // 你的其他错误提示
  }
});

// 页面加载完成后立即触发验证
$(document).ready(function() {
  $('#my-form').valid();
});

只验证特定字段？用element()方法 #

如果不想验证整个表单，只需要针对个别输入框做初始验证，可以调用验证器的element()方法，传入目标输入框的选择器：

// 初始化验证器后，单独验证用户名输入框
$('#my-form').validate().element('#username');

为什么这个方法更好？ #

• 这是插件官方设计的触发验证的方式，比模拟用户交互更可靠，不会有意外的页面滚动问题
• 能一次性显示所有不符合规则的错误，用户打开页面就能看到需要修正的内容，体验更直观

内容的提问来源于stack exchange，提问作者FrancoisBaveye