hujung hadapan webtutorial jsBagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan tertunda kandungan kotak input borang?
Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi pengesahan tertunda kandungan kotak input borang?
Kata Pengantar:
Dalam pembangunan bahagian hadapan, borang adalah komponen yang sangat biasa Pengguna mesti memasukkan kandungan yang betul dalam kotak input untuk menyerahkan borang. Untuk meningkatkan pengalaman pengguna dan mengurangkan ralat input, kami boleh menggunakan JavaScript untuk melaksanakan fungsi pengesahan tertunda, iaitu, untuk mengesahkan sama ada kandungan dalam kotak input memenuhi keperluan selepas tempoh masa tertentu selepas pengguna memasukkan kandungan .
Idea:
- Tambahkan pendengar acara oninput pada setiap kotak input borang.
- Gunakan fungsi setTimeout dalam pendengar acara untuk menangguhkan pelaksanaan fungsi pengesahan untuk satu tempoh masa.
- Dapatkan nilai kotak input dalam fungsi pengesahan, sahkan mengikut keperluan, dan berikan maklumat segera yang sepadan.
Sampel kod:
Berikut ialah contoh kod yang menggunakan JavaScript untuk melaksanakan pengesahan tertunda kandungan kotak input borang:
<!DOCTYPE html>
<html>
<head>
<title>表单输入框内容延时校验</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form>
<label for="name">姓名：</label>
<input type="text" id="name" oninput="validateInput(this)">
<span id="name-error" class="error"></span>
<br><br>
<label for="email">邮箱：</label>
<input type="email" id="email" oninput="validateInput(this)">
<span id="email-error" class="error"></span>
<br><br>
<label for="password">密码：</label>
<input type="password" id="password" oninput="validateInput(this)">
<span id="password-error" class="error"></span>
<br><br>
<input type="submit" value="提交">
</form>
<script>
// 校验输入框内容的函数
function validateInput(input) {
// 获取当前输入框的值
var value = input.value.trim();
// 获取对应的错误提示元素
var errorElement = document.getElementById(input.id + "-error");
// 清空错误提示
errorElement.textContent = "";
// 延时校验，500毫秒后执行
setTimeout(function() {
// 校验姓名
if (input.id === "name") {
if (value === "") {
errorElement.textContent = "请输入姓名";
} else if (value.length < 2 || value.length > 20) {
errorElement.textContent = "姓名长度必须为2-20个字符";
}
}
// 校验邮箱
if (input.id === "email") {
if (value === "") {
errorElement.textContent = "请输入邮箱";
} else if (!/^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/.test(value)) {
errorElement.textContent = "请输入正确的邮箱格式";
}
}
// 校验密码
if (input.id === "password") {
if (value === "") {
errorElement.textContent = "请输入密码";
} else if (value.length < 6 || value.length > 20) {
errorElement.textContent = "密码长度必须为6-20个字符";
}
}
}, 500);
}
</script>
</body>
</html>Penjelasan:
- Dalam contoh ini, kami menambah borang ringkas, termasuk nama, Terdapat tiga kotak input untuk e-mel dan kata laluan.
- Setiap kotak input terikat kepada pendengar acara oninput Apabila pengguna memasukkan kandungan dalam kotak input, fungsi pengesahan validateInput akan dipanggil.
-
Logik fungsi pengesahan ialah:
- Dapatkan nilai kotak input semasa dan keluarkan ruang hadapan dan belakang.
- Dapatkan elemen gesaan ralat yang sepadan.
- Kosongkan mesej ralat.
- Gunakan fungsi setTimeout untuk menangguhkan pelaksanaan logik pengesahan sebanyak 500 milisaat.
- Lakukan pengesahan berbeza berdasarkan nilai id kotak input. Jika keperluan tidak dipenuhi, maklumat gesaan yang sepadan akan dipaparkan dalam elemen gesaan ralat.
Kesimpulan:
Dengan menggunakan JavaScript untuk melaksanakan fungsi pengesahan tertunda kandungan kotak input borang, kandungan dalam kotak input boleh disahkan dalam tempoh masa tertentu selepas pengguna memasukkan kandungan, dan yang sepadan maklumat segera boleh diberikan. Ini meningkatkan pengalaman pengguna dan mengurangkan ralat input. Kod contoh di atas menyediakan pelaksanaan mudah yang boleh anda lanjutkan dan ubah suai mengikut keperluan khusus anda. Harap artikel ini membantu anda!
Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan tertunda kandungan kotak input borang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
如何实现PHP表单提交后的页面跳转Aug 12, 2023 am 11:30 AM如何实现PHP表单提交后的页面跳转【简介】在Web开发中，表单的提交是一项常见的功能需求。当用户填写完表单并点击提交按钮后，通常需要将表单数据发送至服务器进行处理，并在处理完后将用户重定向至另一个页面。本文将介绍如何使用PHP来实现表单提交后的页面跳转。【步骤一：HTML表单】首先，我们需要在HTML页面中编写一个包含表单的页面，以便用户填写需要提交的数据。
如何处理PHP表单中的用户权限管理Aug 10, 2023 pm 01:06 PM如何处理PHP表单中的用户权限管理随着Web应用程序的不断发展，用户权限管理是一个重要的功能之一。用户权限管理可以控制用户在应用程序中的操作权限，保证数据的安全性和合法性。在PHP表单中，用户权限管理可以通过一些简单的代码来实现。本文将介绍如何处理PHP表单中的用户权限管理，并给出相应的代码示例。一、用户角色的定义和管理首先，对用户角色进行定义和管理是用户权
PHP表单处理：表单数据查询与筛选Aug 07, 2023 pm 06:17 PMPHP表单处理：表单数据查询与筛选引言在Web开发中，表单是一种重要的交互方式，用户可以通过表单向服务器提交数据并进行进一步的处理。本文将介绍如何使用PHP处理表单数据的查询与筛选功能。表单的设计与提交首先，我们需要设计一个包含查询与筛选功能的表单。常见的表单元素包括输入框、下拉列表、单选框、复选框等，根据具体需求进行设计。用户在提交表单时，会将数据以POS
Java实现表单的实时验证与提示功能Aug 07, 2023 am 10:42 AMJava实现表单的实时验证与提示功能随着网络应用的普及和发展，表单的使用也变得越来越重要。表单是网页中用于收集和提交用户数据的元素，例如注册或登录页面的表单。在用户填写表单时，经常需要对其输入的数据进行验证和提示，以保证数据的正确性和完整性。在本文中，我们将介绍如何使用Java语言实现表单的实时验证与提示功能。HTML表单的搭建首先，我们需要使用HTML语言
如何使用PHP处理表单中的数据搜索和过滤Aug 12, 2023 pm 04:00 PM如何使用PHP处理表单中的数据搜索和过滤概要：当用户通过表单提交数据时，我们需要对这些数据进行搜索和过滤，以便得到所需的结果。在PHP中，我们可以使用一些技术来实现这些功能。本篇文章将介绍如何使用PHP处理表单中的数据搜索和过滤，并提供相应的代码示例。简介：表单通常用于收集用户的输入数据，这些数据可以是文本、数字、日期等等。一旦用户提交表单，我们就需要对这些
如何处理PHP表单中的下拉列表选项Aug 11, 2023 am 10:21 AM如何处理PHP表单中的下拉列表选项下拉列表是Web表单中常用的元素，它允许用户从预先定义的选项中选择一个或多个值。在PHP中，我们可以通过一些简单的代码实现下拉列表的处理。本文将向你展示如何使用PHP来处理表单中的下拉列表选项。HTML代码中的下拉列表通常使用<select>和<option>标签来定义。<select>标
如何在Nette框架中使用表单和验证？Jun 04, 2023 pm 03:51 PMNette框架是一款用于PHPWeb开发的轻量级框架，以其简单易用、高效稳定的特点受到了广泛的欢迎和使用。在开发Web应用时，使用表单和验证是不可避免的需求。本文将介绍如何在Nette框架中使用表单和验证。一、表单构建在Nette框架中，表单可以通过Form类来创建。Form类在NetteForms命名空间中，可以通过use关键字引入。useNetteF
ThinkPHP6表单重复提交处理：防止重复操作Aug 12, 2023 pm 02:10 PMThinkPHP6表单重复提交处理：防止重复操作在Web应用程序开发中，表单提交是一项常见的操作。但是，有时用户会因为网络延迟或者误操作造成表单的重复提交，这样会给系统带来一些问题。为了解决这个问题，我们可以在ThinkPHP6框架中进行表单重复提交处理，以防止用户重复操作。一、原因分析造成表单重复提交的原因主要有两个：1.网络延迟：当用户点击提交按钮后，表
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.
ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa
MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
