jquery validate kotak input tidak boleh bertukar merah

Dalam pembangunan web, pengesahan borang ialah pautan yang sangat penting. Pemalam pengesahan jquery boleh membantu kami melaksanakan fungsi pengesahan borang dengan mudah. Semasa proses pengesahan borang, apabila input tidak memenuhi keperluan, pemalam akan menjadikan sempadan kotak input merah untuk menggesa pengguna bahawa input adalah salah. Walau bagaimanapun, dalam beberapa kes, kami mahu kotak input tidak bertukar merah, tetapi mengekalkan warna sempadan asal.

Artikel ini akan memperkenalkan cara menggunakan pemalam pengesahan jquery untuk merealisasikan fungsi pengesahan borang tanpa kotak input menjadi merah.

1. Pengenalan kepada jquery validate plug-in

jquery validate ialah pemalam pengesahan borang yang sangat popular Ia menyediakan set peraturan pengesahan dan fungsi berkaitan yang sangat kaya, yang boleh membantu kami cepat melaksanakan fungsi pengesahan borang. Untuk penggunaan khusus dan arahan berkaitan, sila rujuk dokumentasi pemalam.

2. Lumpuhkan gesaan ralat lalai

Dalam pemalam pengesahan jquery, kaedah gesaan ralat lalai adalah untuk menukar sempadan kotak input menjadi merah dan memasukkan maklumat gesaan ralat di bawah kotak input. Jika kami ingin melumpuhkan gesaan ralat ini, kami perlu menetapkan beberapa parameter semasa memulakan pemalam.

Secara khusus, kami perlu melumpuhkan gesaan ralat lalai dengan menetapkan parameter serlahan dan nyahserlahkan. Parameter serlahan digunakan untuk menetapkan gaya kotak input apabila ralat berlaku, dan parameter nyahserlah digunakan untuk menetapkan gaya kotak input apabila ia kembali normal. Kami boleh menetapkan fungsi panggil balik kosong dalam dua parameter ini untuk melumpuhkan gaya lalai pemalam.

Contohnya:

$("form").validate({
  highlight: function(element) {
    // do nothing
  },
  unhighlight: function(element) {
    // do nothing
  }
});

Dengan tetapan di atas, kotak input tidak akan bertukar merah apabila terdapat ralat, dan ia tidak akan berubah apabila ia kembali normal.

3. Kaedah gesaan ralat tersuai

Walaupun kaedah gesaan ralat lalai sangat mudah, ia mungkin tidak sesuai dalam sesetengah kes. Dalam kes ini, kita boleh menggunakan beberapa fungsi panggil balik yang disediakan oleh jquery validate untuk menyesuaikan kaedah gesaan ralat.

Secara khusus, jquery validate menyediakan dua fungsi panggil balik, errorPlacement dan showErrors, untuk menyesuaikan gesaan ralat. Fungsi errorPlacement digunakan untuk menentukan lokasi mesej ralat, dan fungsi showErrors digunakan untuk memaparkan mesej ralat.

Contohnya:

$("form").validate({
  errorPlacement: function(error, element) {
    // 自定义错误提示信息位置
    error.appendTo(element.parent());
  },
  showErrors: function(errorMap, errorList) {
    // 自定义错误提示信息显示
    var error = errorList[0];
    var element = $(error.element);
    element.addClass("error");
    element.next(".error-message").text(error.message);
  }
});

Melalui tetapan di atas, kami boleh menyesuaikan kedudukan dan gaya mesej ralat untuk mencapai kesan visual tertentu.

4. Gunakan kawalan gaya CSS

Dalam sesetengah kes, kami boleh menetapkan gaya CSS untuk mengelakkan kotak input daripada bertukar merah.

Contohnya:

input.error {
  /* 输入框出错时的样式 */
  /* do something here */
}

input.valid {
  /* 输入框恢复正常时的样式 */
  /* do something here */
}

Dengan menetapkan gaya di atas, kita boleh mengawal gaya kotak input supaya kotak input tidak menjadi merah.

5. Ringkasan

Semasa proses pengesahan borang, kotak input bertukar merah ialah gesaan ralat biasa. Walau bagaimanapun, dalam beberapa kes, kami mahu kotak input tidak bertukar merah, tetapi mengekalkan warna sempadan asal. Artikel ini memperkenalkan beberapa kaedah pengesahan borang untuk menghalang kotak input daripada bertukar merah, termasuk melumpuhkan gesaan ralat lalai, menyesuaikan gesaan ralat dan menggunakan kawalan gaya CSS. Kaedah yang mana untuk dipilih bergantung pada keperluan sebenar dan pilihan peribadi.

Atas ialah kandungan terperinci jquery validate kotak input tidak boleh bertukar merah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!