Pengesahan JavaScript: Pilih Ya atau Tidak

Dalam artikel pendek ini, kita akan membincangkan cara memaparkan dialog pengesahan menggunakan JavaScript. Kotak dialog pengesahan membolehkan anda melakukan tindakan berdasarkan input pengguna.

JavaScript ialah salah satu teknologi teras Internet. Ia digunakan oleh kebanyakan laman web dan disokong oleh semua pelayar web moden tanpa memerlukan pemalam. Di Envato Tuts+, kami membincangkan petua dan kiat yang boleh membantu anda dengan pembangunan JavaScript harian anda.

Sebagai pembangun JavaScript, anda selalunya perlu mendapatkan input pengguna dalam bentuk soalan ya atau tidak dan melakukan beberapa tindakan berdasarkannya. Khususnya, sesetengah tindakan adalah sensitif dan tidak boleh dibuat asal, dan anda ingin memberi amaran atau pengesahan kepada pengguna bahawa mereka sebenarnya berniat untuk melakukan tindakan itu supaya mereka tidak melakukannya secara tidak sengaja. Sebagai contoh, jika terdapat pautan padam yang membolehkan anda memadamkan entiti daripada pangkalan data, anda perlu mengesahkan dengan pengguna sama ada mereka benar-benar mahu memadamkannya. Jadi, walaupun pengguna mengklik pada pautan padam secara tidak sengaja, mereka sekurang-kurangnya mempunyai peluang untuk membatalkannya.

Dalam artikel ini, saya akan menunjukkan kepada anda dua cara untuk mengesahkan tindakan pengguna dalam JavaScript: menggunakan kaedah confirm dan menggunakan div pengesahan tersembunyi. confirm 方法和使用隐藏确认 div。

confirm 方法的语法

在 JavaScript 中，您可以使用 window 对象的 confirm 方法来显示对话框，并等待用户确认或取消。今天，我们将结合实际示例讨论它的工作原理。

在本节中，我们将介绍 window.confirm 方法的语法。

confirm 方法的语法如下所示：

var result = window.confirm(message);

confirm 方法采用单个字符串参数，您可以传递要在对话框中显示的消息。这是一个可选参数，但您需要传递一条明智的消息，否则将显示一个带有是和否选项的空白对话框，并且可能对您的访问者没有任何意义。通常，消息采用问题的形式，并向用户提供两个选项供选择。

在对话框中，有两个按钮：确定和取消。如果用户点击确定按钮，confirm方法返回true，如果用户点击取消按钮，confirm方法返回false。所以可以通过confirm方法的返回值来了解用户的选择。 （如果您希望按钮显示不同的内容，例如是和否，我将在本文底部向您展示如何操作。）

由于 window 对象始终是隐式的，也就是说它的属性和方法始终在作用域内，因此您还可以调用 confirm 方法，如以下代码片段所示。

var result = confirm(message);

需要注意的是，确认对话框是模态且同步的。因此，当显示对话框时，JavaScript 代码执行就会停止，而在用户通过单击“确定”或“取消”按钮关闭对话框后，JavaScript 代码会继续执行。

这就是 confirm 方法的语法概述。在下一节中，我们将介绍一个现实世界的示例。

confirm 方法的真实示例

在本节中，我们将通过一个实际示例来演示如何在 JavaScript 中使用 confirm 方法。

看一下下面的示例。

当用户单击删除我的个人资料！按钮时，它会调用 deleteProfile 函数。在deleteProfile函数中，我们调用了confirm方法，该方法向用户显示确认对话框。

最后，如果用户单击确认对话框中的确定按钮，我们将继续将用户重定向到 /deleteProfile.php 页面，该页面将执行删除操作。另一方面，如果用户单击取消按钮，我们将不会执行任何操作。 JavaScript 执行将停止，直到用户做出选择并关闭确认对话框。

这就是如何使用JavaScript中的confirm方法来呈现是或否选择对话框。

使用隐藏 Div 确认“是”或“否”

使用 confirm

sahkan sintaks kaedah

Dalam JavaScript, anda boleh menggunakan kaedah confirm objek window untuk memaparkan kotak dialog dan menunggu pengguna mengesahkan atau membatalkan. Hari ini, kita akan membincangkan cara ia berfungsi dengan contoh praktikal. Dalam bahagian ini, kami akan memperkenalkan sintaks kaedah window.confirm. Sintaks kaedah sahkan adalah seperti berikut: rrreee Kaedah confirm mengambil satu parameter rentetan di mana anda menghantar mesej yang ingin anda paparkan dalam dialog. Ini adalah parameter pilihan, tetapi anda perlu menghantar mesej yang masuk akal, jika tidak, kotak dialog kosong dengan pilihan ya dan tiada akan dipaparkan dan mungkin tidak bermakna apa-apa kepada pelawat anda. Biasanya, mesej itu berbentuk soalan dan menyediakan pengguna dengan dua pilihan untuk dipilih. Dalam kotak dialog, terdapat dua butang:

OK

dan 🎜Batal🎜. Jika pengguna mengklik butang OK, kaedah sahkan mengembalikan benar Jika pengguna mengklik butang batal, kaedah sahkan mengembalikan false. Jadi anda boleh memahami pilihan pengguna melalui nilai pulangan kaedah pengesahan. (Jika anda mahu butang anda menyatakan sesuatu yang berbeza, seperti 🎜Ya🎜 dan 🎜Tidak🎜, saya akan tunjukkan caranya di bahagian bawah artikel ini.) 🎜 🎜Memandangkan objek window sentiasa tersirat, bermakna sifat dan kaedahnya sentiasa dalam skop, anda juga boleh memanggil kaedah confirm, seperti yang ditunjukkan dalam coretan kod berikut Tunjukkan. 🎜 rrreee 🎜Perlu diingat bahawa dialog pengesahan adalah modal dan segerak. Oleh itu, pelaksanaan kod JavaScript berhenti apabila kotak dialog dipaparkan dan diteruskan selepas pengguna menutup kotak dialog dengan mengklik butang OK atau Batal. 🎜 🎜Ini ialah gambaran keseluruhan sintaks kaedah confirm. Dalam bahagian seterusnya, kami membentangkan contoh dunia sebenar. 🎜

Contoh kehidupan sebenar kaedah confirm

🎜Dalam bahagian ini, kami akan menunjukkan cara menggunakan kaedah confirm dalam JavaScript melalui contoh praktikal. 🎜 🎜Lihat contoh di bawah. 🎜 🎜🎜 🎜Apabila pengguna mengklik 🎜Padam profil saya! 🎜 butang, ia akan memanggil fungsi deleteProfile. Dalam fungsi deleteProfile, kami memanggil kaedah pengesahan, yang memaparkan kotak dialog pengesahan kepada pengguna. 🎜 🎜Akhir sekali, jika pengguna mengklik butang 🎜OK🎜 dalam dialog pengesahan, kami akan meneruskan untuk mengubah hala pengguna ke halaman /deleteProfile.php, yang akan melakukan tindakan pemadaman. Sebaliknya, jika pengguna mengklik butang 🎜Batal🎜, kami tidak akan melakukan sebarang tindakan. Pelaksanaan JavaScript akan berhenti sehingga pengguna membuat pilihan dan menutup dialog pengesahan. 🎜 🎜Ini adalah cara untuk memberikan dialog pemilihan ya atau tidak menggunakan kaedah pengesahan dalam JavaScript. 🎜

Sahkan Ya atau Tidak menggunakan Div tersembunyi

🎜Terdapat beberapa keburukan menggunakan kaedah confirm untuk mendapatkan pengesahan pengguna. Salah satunya ialah dialog pengesahan tidak akan menjadi sebahagian daripada UI apl atau tapak web anda. Ia tidak akan menggunakan penjenamaan atau skema warna anda. Ia juga tidak boleh disesuaikan, contohnya jika anda ingin mengatakan 🎜Ya🎜 atau 🎜Tidak🎜 dan bukannya 🎜OK🎜 dan 🎜Batalkan🎜. Akhir sekali, dialog pengesahan adalah modal, jadi selagi ia dipaparkan, pengguna tidak boleh berinteraksi dengan mana-mana bahagian lain antara muka apl. 🎜 🎜Cara lain untuk mengesahkan ya atau tidak adalah dengan menggunakan div tersembunyi pada halaman. Tengok contoh di bawah: 🎜

Dalam contoh ini, kami mempunyai div pengesahan tersembunyi dengan ID confirm. Untuk menunjukkan div, kami hanya menetapkan sifat hiddennya kepada true. Apabila kami ingin menunjukkan mesej pengesahan, kami menetapkan tersembunyi kepada true dan menetapkannya kepada false sekali lagi untuk menyembunyikannya. confirm。要显示 div，我们只需将其 hidden 属性设置为 true。当我们想要显示确认信息时，我们将 hidden 设置为 true，并再次将其设置为 false 以隐藏它。

正如您所看到的，这种确认是或否的方法比 window.confirm 方法使我们具有更大的灵活性和定制性。

结论

今天，我们讨论了两种在 JavaScript 中获取用户确认的方法。首先我们看最简单的方法：window.confirm

Seperti yang anda lihat, kaedah mengesahkan ya atau tidak ini memberikan kami lebih fleksibiliti dan penyesuaian daripada kaedah window.confirm. 🎜

Kesimpulan

🎜Hari ini, kami membincangkan dua cara untuk mendapatkan pengesahan pengguna dalam JavaScript. Mula-mula mari kita lihat kaedah paling mudah: kaedah window.confirm. Walau bagaimanapun, ini tidak mewujudkan pengalaman pengguna yang baik. Kemudian saya menunjukkan kepada anda cara menggunakan div tersembunyi untuk mendapatkan pengesahan pengguna dan mempunyai lebih kawalan ke atas penampilan dan gelagat pengesahan. 🎜

Atas ialah kandungan terperinci Pengesahan JavaScript: Pilih Ya atau Tidak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!