JavaScript window.alert
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 window.alert 方法。此方法显示一个包含指定消息和一个“确定”按钮的警告对话框。这是向用户显示信息的 Easiest 方法之一。
基本定义
window.alert 方法显示一个带有消息和“确定”按钮的模态对话框。该对话框是模态的，这意味着它会暂停脚本执行，直到用户将其关闭。
该方法接受一个参数——要显示的消息。如果消息不是字符串，它会被转换为字符串。window 前缀是可选的，因此您可以使用 alert()。
基本警告
此示例演示了 alert 方法最简单的用法。
<!DOCTYPE html>
<html>
<head>
<title>Basic Alert</title>
</head>
<body>
<button onclick="showAlert()">Show Alert</button>
<script>
function showAlert() {
alert("This is a basic alert message!");
}
</script>
</body>
</html>
在这个基本示例中，我们有一个按钮，点击时会触发一个警报。警报会显示文本“这是一个基本警报消息！”和一个“确定”按钮。
这演示了 alert() 用于向用户显示简单消息的基本用法。该对话框是模态的，会阻止与页面的交互，直到关闭为止。
带有变量的警告
此示例展示了如何在警报消息中包含变量值。
<!DOCTYPE html>
<html>
<head>
<title>Alert with Variables</title>
</head>
<body>
<button onclick="showAlert()">Show Alert</button>
<script>
function showAlert() {
const userName = "John Doe";
const items = 5;
alert(`Hello ${userName}! You have ${items} items in your cart.`);
}
</script>
</body>
</html>
在这里，我们使用模板字面量将变量值包含在警报消息中。变量 userName 和 items 被插入到字符串中。
这演示了如何通过将静态文本与变量值组合来创建动态警报消息。模板字面量（使用反引号）使此操作变得容易。
带有换行符的警告
此示例演示了如何创建多行警报消息。
<!DOCTYPE html>
<html>
<head>
<title>Multi-line Alert</title>
</head>
<body>
<button onclick="showAlert()">Show Alert</button>
<script>
function showAlert() {
alert("First line of text\nSecond line of text\nThird line");
}
</script>
</body>
</html>
在此示例中，我们使用换行符 \n 在警报消息中创建换行符。这将导致一个多行警报对话框。
这展示了如何格式化警报消息以提高可读性。\n 转义序列是 JavaScript 字符串中插入换行符的标准方法。
带有用户输入的警告
此示例演示了在获取用户输入后使用警报。
<!DOCTYPE html>
<html>
<head>
<title>Alert with Input</title>
</head>
<body>
<input type="text" id="nameInput" placeholder="Enter your name">
<button onclick="greetUser()">Greet Me</button>
<script>
function greetUser() {
const name = document.getElementById('nameInput').value;
alert(`Hello, ${name || 'stranger'}!`);
}
</script>
</body>
</html>
在这里，我们从文本字段获取用户输入并将其显示在警报消息中。如果输入为空，我们使用默认问候语（“stranger”）。
这演示了警报如何用于根据用户输入提供反馈。逻辑 OR 运算符（||）提供了一个备用值。
表单验证的警告
此示例展示了使用警报进行简单的表单验证。
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<form onsubmit="return validateForm()">
<input type="email" id="email" placeholder="Enter your email">
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
const email = document.getElementById('email').value;
if (!email.includes('@')) {
alert('Please enter a valid email address!');
return false;
}
return true;
}
</script>
</body>
</html>
在此示例中，我们检查输入的电子邮件是否包含“@”符号。如果没有，我们会显示一个警报并通过返回 false 来阻止表单提交。
这演示了使用警报进行简单的验证反馈。虽然警报不适合生产验证，但它们适用于快速原型。
来源
在本文中，我们展示了如何在 JavaScript 中使用 window.alert。虽然简单，但警报对话框在调试和快速用户反馈方面仍然很有用。
作者
列出 所有 JS DOM 教程。