javascript
javascript对话框_JavaScript中的对话框
javascript對話框
JavaScript對話框 (JavaScript Dialog Boxes)
Dialog boxes are a great way to provide feedback to the user when they submit a form. In JavaScript, there are three kinds of Dialog boxes,
對話框是向用戶提交表單時提供反饋的好方法。 在JavaScript中，共有三種對話框，
Alert
警報
Confirm
確認
Prompt
提示
1) Alert
1)警報
An alert box acts as a warning popup for the user to indicate that something has been entered incorrectly. For example, if you had to enter your email and you didn't match the right email pattern like missed an '@' or something. They give an Ok button to proceed and logically the user is redirected to the same form so they can enter those fields again.
警報框充當用戶的警告彈出窗口，指示輸入的內容不正確。 例如，如果您必須輸入電子郵件，但沒有匹配正確的電子郵件模式，例如缺少“ @”之類的內容。 他們提供一個“確定”按鈕以繼續操作，并且在邏輯上將用戶重定向到相同的表單，以便他們可以再次輸入這些字段。
2) Confirm
2)確認
This box verifies if the field or fields entered by the user is accepted or not. When a confirm box opens up, the user will have two options 'Ok' and 'Cancel' to proceed further. The click events on these buttons are associated with a property of the window.confirm() method that returns true when the user clicks 'Ok' and false otherwise. Imagine that you are doing an online transaction through internet banking and you have entered some credential bank details. Confirm boxes are a way to let the user know that they have filled out a form with important details and can recheck them if they want.
此框驗證用戶輸入的一個或多個字段是否被接受。 當打開確認框時，用戶將具有兩個選項“確定”和“取消”以繼續進行操作。 這些按鈕上的單擊事件與window.confirm()方法的屬性相關聯，該方法在用戶單擊“確定”時返回true，否則返回false。 想象一下，您正在通過互聯網銀行進行在線交易，并且已經輸入了一些憑證銀行詳細信息。 確認框是一種讓用戶知道他們已經填寫了重要細節的表格的方式，并且可以根據需要重新檢查。
3) Prompt
3)提示
Prompt boxes are very similar to confirm boxes with the only difference that they have an input value that the user can be asked to enter. For example, prompt boxes can be helpful when you're filling out a form where only on entering some basic details you are asked for more confidential details. The latter can be hooked up to the prompt's input field. The user is then given 'Ok' and 'Cancel' buttons which work the same way as they did for a Confirm box.
提示框與確認框非常相似，唯一的區別是提示框具有可以要求用戶輸入的輸入值。 例如，當您填寫表格時，僅在輸入一些基本詳細信息時才要求您提供更多機密詳細信息，提示框可能會有所幫助。 后者可以連接到提示的輸入字段。 然后，向用戶提供“確定”和“取消”按鈕，其作用與確認框相同 。
To demonstrate, let's create a simple sign-in form that utilizes all the three Dialog boxes.
為了演示，讓我們創建一個使用所有三個對話框的簡單登錄表單。
Example: (index.html)
示例：(index.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"><title>Dialog Boxes in Forms</title><!-- Compiled and minified CSS --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"><!-- Compiled and minified JavaScript --><script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script></head> <style>body {background: skyblue;}form {position: relative;top: 60px;left: 40px;padding: 40px;border: 2px solid slategray;background: slategray;}button {position: relative;left: 350px;color: skyblue;} </style><body><div class="container"><form><h3 class="white-text">Welcome to gingo! Let's sign you in :)</h2><p class="white-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, eligendi corporis quam, similique ipsum expedita, cum impedit culpa autem ea velit. Hic voluptas libero quasi neque, expedita saepe ex voluptate!</p><label for="name" class="white-text"><input type="text" id="name">Enter your name</label><label for="email" class="white-text"><input type="text" id="email">Enter your email</label><br><br><br><button class="btn submit">Proceed</button></form></div> </body> <script></script> </html>Output
輸出量
Now that we have a basic form setup, let's think about how we're going to use the three Dialog boxes to provide some feedback. We can implement alert to check if the user has filled the form so that they don't submit an empty form so let's do this first,
現在我們有了基本的表單設置，讓我們考慮一下如何使用三個對話框提供一些反饋。 我們可以實施警報，以檢查用戶是否填寫了表單，這樣他們就不必提交空白表單，因此我們首先進行操作，
<script>document.querySelector('.submit').addEventListener('click', e => {e.preventDefault();const name = document.querySelector('#name').value;const email = document.querySelector('#email').value;if (name == '' || email == '')alert('Please fill all the fields!')}) </script>Output
輸出量
If the user did enter some value, let's give a prompt box to the user for entering a special security code and if you did enter it, we'll open a confirm Dialog box,
如果用戶確實輸入了一些值，我們將為用戶提供一個輸入特殊密碼的提示框，如果您輸入了它，我們將打開一個確認對話框，
<script>document.querySelector('.submit').addEventListener('click', e => {e.preventDefault();const name = document.querySelector('#name').value;const email = document.querySelector('#email').value;if (name == '' || email == '')alert('Please fill all the fields!')else {prompt('Enter your special security')if (prompt() != null)confirm('Are you sure you want to proceed?')}}) </script>Output
輸出量
Thus through these Dialog boxes, you can provide feedback to the user that can improve the styles of your forms on your website.
因此，通過這些對話框，您可以向用戶提供反饋，以改善您網站上表單的樣式。
翻譯自: https://www.includehelp.com/code-snippets/dialog-boxes-in-javascript.aspx
javascript對話框
總結
以上是生活随笔為你收集整理的javascript对话框_JavaScript中的对话框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 土豚mysql_树莓派LNMP配置
- 下一篇： electron 菜单栏_如何在Elec