jquery menggesa ralat input

Dalam reka bentuk laman web, borang adalah salah satu elemen biasa. Pengguna borang mengisi maklumat yang perlu diserahkan, dan kemudian laman web menyemak kesahihan data melalui pengesahan borang. Dalam bentuk, untuk meningkatkan pengalaman pengguna, pemalam jQuery sering digunakan untuk memberikan beberapa petua dan maklum balas. Antaranya, pemalam biasa ialah gesaan ralat input.

Gesaan ralat input membolehkan pengguna mengetahui data yang menyalahi undang-undang sebelum menyerahkan borang, dengan itu menjimatkan masa pengguna dan mengurangkan ralat. Di bawah ialah contoh yang menunjukkan cara melaksanakan gesaan ralat input.

Pertama, buat satu bentuk HTML yang mudah. Borang tersebut mengandungi tiga medan, nama, e-mel dan kata laluan.

<form id="signup-form">
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" id="name" placeholder="请输入您的姓名">
  </div>
  <div class="form-group">
    <label for="email">电子邮件</label>
    <input type="email" class="form-control" id="email" placeholder="请输入您的电子邮件">
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" class="form-control" id="password" placeholder="请输入密码">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

Seterusnya, kami menggunakan pemalam jQuery untuk menggesa ralat input. Menggunakan pemalam pengesahan jQuery, anda boleh menyemak borang anda secara dinamik sebelum pengguna menyerahkannya berdasarkan peraturan untuk medan borang (seperti medan yang diperlukan atau format e-mel). Jika medan tidak mematuhi peraturan, ralat input akan digesa. Berikut ialah contoh cara untuk melaksanakan fungsi ini:

$(document).ready(function(){
  $("#signup-form").validate({
    rules: {
      name: {
        required: true
      },
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 6
      }
    },
    messages: {
      name: {
        required: "姓名不能为空"
      },
      email: {
        required: "电子邮件不能为空",
        email: "电子邮件格式不正确"
      },
      password: {
        required: "密码不能为空",
        minlength: "密码至少需要6个字符"
      }
    },
    errorElement: "div",
    errorPlacement: function(error, element) {
      error.addClass("invalid-feedback");
      element.closest(".form-group").append(error);
    },
    highlight: function(element, errorClass, validClass) {
      $(element).addClass("is-invalid").removeClass("is-valid");
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).removeClass("is-invalid").addClass("is-valid");
    }
  });
});

Dalam contoh di atas, pemalam pengesahan digunakan pada pemuatan halaman melalui kaedah $(document).ready(). Objek rules menentukan peraturan, dan objek messages menentukan mesej ralat. Dalam mesej ralat, anda boleh menggunakan simbol "$" aksara khas untuk merujuk nama medan borang. Pilihan

errorElement akan menggunakan elemen div untuk memaparkan mesej ralat. Pilihan errorPlacement memasukkan mesej ralat ke dalam kelas form-group yang dikaitkan dengan medan input. Pilihan highlight dan unhighlight dicetuskan apabila kotak input masing-masing difokuskan dan di luar fokus. Kedua-dua kaedah ini menetapkan warna sempadan kepada merah dan hijau untuk menyerlahkan medan ralat dengan lebih baik.

Akhir sekali, apabila pengguna menyerahkan borang, pemalam pengesahan akan melaksanakan pengesahan. Jika medan tidak mematuhi peraturan, mesej ralat muncul. Mesej ini dipaparkan berdasarkan medan yang sepadan di bawah butang hantar.

Di atas ialah contoh gesaan ralat input. Menggunakan jQuery dan pemalam ini boleh membantu pereka bentuk melaksanakan pengesahan asas borang dan menggesa pengguna untuk memahami data yang menyalahi undang-undang sebelum menyerahkan borang.

Atas ialah kandungan terperinci jquery menggesa ralat input. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!