Question

我正在尝试制作一个表单验证器，该表单验证器在输入文本字段中至少需要6个字符。如果长度小于6且匹配，则应该显示错误！如果大于6，则无论字符多长，都显示错误。

$(function() {
  let texts = $("#txt").val();
  let password = $("#pass").val();

  $("#frm").submit(function(e) {
    if (texts.length < 6) {
      $("#text-adder").text("Error");
      e.preventDefault();
    } else {
      $("#text-adder").text("Matched!");
    }
  })
});

Answer 1

$("#frm").submit(function(e) {
  e.preventDefault();   
  if ($("#txt").val().length < 6) {
    $("#text-adder").text("Error");

  } else {
    $("#text-adder").text("Matched!");
  }
})

Answer 2

获取提交功能内的文本和密码值。这是因为在提交时需要检查该值。但是，如果您在Submit函数之外获取它，它将无法获得Submit的更新值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Memory game</title>
</head>

<body>
  <section class="memory-game">
    <div class="memory-card" data-namecard="Akashi-Kaikyo-Bridge-Japan">
      <img class="front-face" src="https://i.pinimg.com/originals/bb/c5/22/bbc522a0aadb5910578d090f34d48956.jpg" alt="Akashi-Kaikyo-Bridge-Japan">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Akashi-Kaikyo-Bridge-Japan">
      <img class="front-face" src="https://i.pinimg.com/originals/bb/c5/22/bbc522a0aadb5910578d090f34d48956.jpg" alt="Akashi-Kaikyo-Bridge-Japan">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Bridge-of-Sighs-Venice-Italy">
      <img class="front-face" src="https://i.pinimg.com/originals/1b/cd/0a/1bcd0a7fbe39f2755b1b8e251052fd64.jpg" alt="Bridge-of-Sighs-Venice-Italy">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Bridge-of-Sighs-Venice-Italy">
      <img class="front-face" src="https://i.pinimg.com/originals/1b/cd/0a/1bcd0a7fbe39f2755b1b8e251052fd64.jpg" alt="Bridge-of-Sighs-Venice-Italy">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Brooklyn-Bridge-New-York">
      <img class="front-face" src="https://i.pinimg.com/originals/79/1e/74/791e747b7ed469142a1f07256f17e366.jpg" alt="Brooklyn-Bridge-New-York">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Brooklyn-Bridge-New-York">
      <img class="front-face" src="https://i.pinimg.com/originals/79/1e/74/791e747b7ed469142a1f07256f17e366.jpg" alt="Brooklyn-Bridge-New-York">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>

    <div class="memory-card" data-namecard="Chapel-Bridge-Switzerland">
      <img class="front-face" src="https://i.pinimg.com/originals/ec/fb/9e/ecfb9ee4ee30d0dcffb221bafec5faca.jpg" alt="Chapel-Bridge-Switzerland">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Chapel-Bridge-Switzerland">
      <img class="front-face" src="https://i.pinimg.com/originals/ec/fb/9e/ecfb9ee4ee30d0dcffb221bafec5faca.jpg" alt="Chapel-Bridge-Switzerland">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Chenyang-Bridge-China">
      <img class="front-face" src="https://i.pinimg.com/originals/9c/d9/16/9cd9167284afe5dea8a5b5cf5576c30f.jpg" alt="Chenyang-Bridge-China">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Chenyang-Bridge-China">
      <img class="front-face" src="https://i.pinimg.com/originals/9c/d9/16/9cd9167284afe5dea8a5b5cf5576c30f.jpg" alt="Chenyang-Bridge-China">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>

    <div class="memory-card" data-namecard="Gateshead-Millenium-Bridge-England">
      <img class="front-face" src="https://i.pinimg.com/originals/f2/f1/2d/f2f12dab27a0ddcf1636772330ae43c5.jpg" alt="Gateshead-Millenium-Bridge-England">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Gateshead-Millenium-Bridge-England">
      <img class="front-face" src="https://i.pinimg.com/originals/f2/f1/2d/f2f12dab27a0ddcf1636772330ae43c5.jpg" alt="Gateshead-Millenium-Bridge-England">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="George-Washington-Bridge-New-York">
      <img class="front-face" src="https://i.pinimg.com/originals/c3/d8/ef/c3d8efd8a617aa8a5ca6fbd54ffe4da3.jpg" alt="George-Washington-Bridge-New-York">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="George-Washington-Bridge-New-York">
      <img class="front-face" src="https://i.pinimg.com/originals/c3/d8/ef/c3d8efd8a617aa8a5ca6fbd54ffe4da3.jpg" alt="George-Washington-Bridge-New-York">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Hussaini-Hanging-Bridge-Pakistan">
      <img class="front-face" src="https://i.pinimg.com/originals/cc/8d/8c/cc8d8ca23d1123c52a73861c1bef20e5.jpg" alt="Hussaini-Hanging-Bridge-Pakistan">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Hussaini-Hanging-Bridge-Pakistan">
      <img class="front-face" src="https://i.pinimg.com/originals/cc/8d/8c/cc8d8ca23d1123c52a73861c1bef20e5.jpg" alt="Hussaini-Hanging-Bridge-Pakistan">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Kintai-Bridge-Japan">
      <img class="front-face" src="https://i.pinimg.com/originals/23/1c/71/231c717c88464095512255fd65f04bf9.jpg" alt="Kintai-Bridge-Japan">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Kintai-Bridge-Japan">
      <img class="front-face" src="https://i.pinimg.com/originals/23/1c/71/231c717c88464095512255fd65f04bf9.jpg" alt="Kintai-Bridge-Japan">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Langkawi-Sky-Bridge-Malaysia">
      <img class="front-face" src="https://i.pinimg.com/originals/f7/90/f8/f790f86418273a3ff6cc79c9f0e018f7.jpg" alt="Langkawi-Sky-Bridge-Malaysia">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Langkawi-Sky-Bridge-Malaysia">
      <img class="front-face" src="https://i.pinimg.com/originals/f7/90/f8/f790f86418273a3ff6cc79c9f0e018f7.jpg" alt="Langkawi-Sky-Bridge-Malaysia">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Millenium-Bridge-London">
      <img class="front-face" src="https://i.pinimg.com/originals/56/57/bc/5657bc604d0d0336c032cf596fb10fa1.jpg" alt="Millenium-Bridge-London">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Millenium-Bridge-London">
      <img class="front-face" src="https://i.pinimg.com/originals/56/57/bc/5657bc604d0d0336c032cf596fb10fa1.jpg" alt="Millenium-Bridge-London">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Octavio-Frias-de-Oliveira-Bridge-Brazil">
      <img class="front-face" src="https://i.pinimg.com/originals/f7/29/6b/f7296b01f446c3e89d22d228b9ad90cd.jpg" alt="Octavio-Frias-de-Oliveira-Bridge-Brazil">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Octavio-Frias-de-Oliveira-Bridge-Brazil">
      <img class="front-face" src="https://i.pinimg.com/originals/f7/29/6b/f7296b01f446c3e89d22d228b9ad90cd.jpg" alt="Octavio-Frias-de-Oliveira-Bridge-Brazil">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Oresund-Bridge-Sweden">
      <img class="front-face" src="https://i.pinimg.com/originals/3c/6a/6d/3c6a6d49a66b51b09eda41174c0d6c12.jpg" alt="Oresund-Bridge-Sweden">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Oresund-Bridge-Sweden">
      <img class="front-face" src="https://i.pinimg.com/originals/3c/6a/6d/3c6a6d49a66b51b09eda41174c0d6c12.jpg" alt="Oresund-Bridge-Sweden">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Pont-Gustave-Flaubert-France">
      <img class="front-face" src="https://i.pinimg.com/originals/e3/08/a6/e308a61540c27b5db7af700cc5ab0929.jpg" alt="Pont-Gustave-Flaubert-France">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Pont-Gustave-Flaubert-France">
      <img class="front-face" src="https://i.pinimg.com/originals/e3/08/a6/e308a61540c27b5db7af700cc5ab0929.jpg" alt="Pont-Gustave-Flaubert-France">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Pont-du-Gard-France">
      <img class="front-face" src="https://i.pinimg.com/originals/48/ee/ca/48eecac3f84b3f6dbdcbecbe8b9f094c.jpg" alt="Pont-du-Gard-France">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Pont-du-Gard-France">
      <img class="front-face" src="https://i.pinimg.com/originals/48/ee/ca/48eecac3f84b3f6dbdcbecbe8b9f094c.jpg" alt="Pont-du-Gard-France">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Rialto-Bridge-Venice">
      <img class="front-face" src="https://i.pinimg.com/originals/1b/cd/0a/1bcd0a7fbe39f2755b1b8e251052fd64.jpg" alt="Rialto-Bridge-Venice">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Rialto-Bridge-Venice">
      <img class="front-face" src="https://i.pinimg.com/originals/1b/cd/0a/1bcd0a7fbe39f2755b1b8e251052fd64.jpg" alt="Rialto-Bridge-Venice">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Roebling-Suspension-Bridge-Ohio">
      <img class="front-face" src="https://i.pinimg.com/originals/49/a7/dd/49a7dd027a3a4a8d20e99c7501af7dbc.jpg" alt="Roebling-Suspension-Bridge-Ohio">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Roebling-Suspension-Bridge-Ohio">
      <img class="front-face" src="https://i.pinimg.com/originals/49/a7/dd/49a7dd027a3a4a8d20e99c7501af7dbc.jpg" alt="Roebling-Suspension-Bridge-Ohio">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Tower-Bridge-London">
      <img class="front-face" src="https://i.pinimg.com/originals/39/df/2c/39df2c672af164b153762122460170b7.jpg" alt="Tower-Bridge-London">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>
    <div class="memory-card" data-namecard="Tower-Bridge-London">
      <img class="front-face" src="https://i.pinimg.com/originals/39/df/2c/39df2c672af164b153762122460170b7.jpg" alt="Tower-Bridge-London">
      <img class="back-face" src="https://i.pinimg.com/originals/ae/ed/f2/aeedf23c422b164fc6f8e8ff43b17c22.jpg" alt="Charles-Bridge-Prague">
    </div>



  </section>


  <script src="index.js"></script>
</body>

</html>

$("#frm").submit(function(e) {
  e.preventDefault();
  let texts = $("#txt").val();
  let password = $("#pass").val();
  if (texts.length < 6) {
    $("#text-adder").text("Error");

  } else {
    $("#text-adder").text("Matched!");
  }
})

Answer 3

您实际上需要获取Submit函数中#txt字段的值，以便使用最新值更新该值：

$(function() {
  $("#frm").submit(function(e) {
    let texts = $("#txt").val();
    let password = $("#pass").val();
    if(texts.length < 6) {
        $("#text-adder").text("Error");
        e.preventDefault();
    }
    else {
        $("#text-adder").text("Matched!");
    }
  })
});

如果else语句在jquery中不起作用

3 个答案: