验证email输入字段时jQuery无响应问题求助

我瞅了下你的代码，发现几个导致jQuery表单验证没生效的关键问题，咱们一个个来解决：

1. 未引入jQuery Validate插件 #

你只加载了jQuery核心库，但jQuery Validate是独立的插件，必须单独引入它才能使用验证功能，不然代码里的validate()方法根本无法被识别。

2. 表单选择器不匹配 #

你的JS代码里用$("#test")获取表单，但HTML中的<form>标签只有name="test"，没有设置id="test"——jQuery的#选择器是根据元素的id属性查找的，找不到目标表单的话，验证逻辑自然没法绑定上去。

3. 验证提示文本的冗余错误 #

你在messages里写的"Enter enter valid email address"重复了"Enter"，属于小笔误，得修正下让提示更通顺。

修正后的完整代码 #

<!-- 先引入jQuery核心库 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- 再引入jQuery Validate插件 -->
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

<!-- 给表单加上id="test"，和JS选择器匹配 -->
<form name="test" id="test" method="post">
  email:<input type="email" name="email" id="email">
  <input type="submit" value="submit">
</form>

<script>
$(document).ready(function() {
  $("#test").validate({
    rules: {
      "email": {
        required: true,
        // 额外加上邮箱格式验证规则，让验证更严谨
        email: true
      }
    },
    messages: {
      "email": {
        required: "Please enter an email address",
        email: "Please enter a valid email address"
      }
    }
  });
});
</script>

额外说明 #

我特意给验证规则加了email: true，这样不仅会检查输入是否为空，还会自动校验内容是否符合邮箱格式，比单纯的必填验证更实用~

内容的提问来源于stack exchange，提问作者Njoki Wa Wangari