为什么jQuery无法关联HTML表单，自定义校验规则不生效？

问题原因及修复方案 #

1. validate配置参数拼写错误
   你在loginform.js里写的校验规则参数是rule，jquery validate的官方配置参数为rules，缺了末尾的s，这是规则不生效的核心原因，修改后的配置如下：

$(document).ready(function() {
  $('#loginform').validate({
    // 这里把rule改成rules
    rules:{
      username:{
        required: true,
        minlength: 5
      },
      password:{
        required: true,
      }
    },
    messages:{
      username: {
        required: "Please Enter a Username",
        minlength: "Your Username Must Be At Least 5 Characters"
      },
      password: {
        required: "Please Enter a Password:",
      }
    }
  })
})

2. HTML语法错误
   你的login.html里head标签没有正确闭合，结束标签写成了<head>，需要改成</head>；另外form标签的id属性缺少引号，把<form id= loginform>改成<form id="loginform">，避免浏览器解析异常。

3. JS文件加载校验方法
   要确认JS文件是否正常加载，按以下步骤操作：

• 打开页面后按F12调出开发者工具，切换到「网络」面板，刷新页面
• 查看jquery.min.js、jquery.validate.js、loginform.js三个文件的请求状态，状态码为200代表加载成功，404代表文件路径错误需要调整
• 切换到「控制台」面板，若出现$ is not defined说明jQuery加载失败，出现$(...).validate is not a function说明validate插件加载失败

4. 路径问题排查
   如果是本地运行项目，确认你的项目根目录下存在js文件夹，且文件夹内确实有jquery.validate.js和loginform.js两个文件，路径不匹配会直接导致JS加载失败。

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