设计一个表单,包括一个文本框和按钮,在文本框中输入邮箱后,点击按钮能进行验证,要求不能为空,且必须包含 @ 和 . 提示:使用 indexOf() 字符串方法。
时间: 2024-09-23 22:03:48 浏览: 53
JavaScript程序设计——页面设置与表单验证实验报告.docx
5星 · 资源好评率100%
设计这样一个表单,你可以使用 HTML、CSS 和 JavaScript 来实现。首先,创建HTML结构:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
#email-form {
width: 400px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
}
input[type="text"], button {
display: block;
width: 100%;
margin-bottom: 10px;
}
.error-message {
color: red;
}
</style>
</head>
<body>
<div id="email-form">
<input type="text" id="email-input" placeholder="请输入邮箱地址">
<button onclick="validateEmail()">验证</button>
<p class="error-message" id="email-error"></p>
</div>
<script src="form-validation.js"></script>
</body>
</html>
```
接下来,创建一个JavaScript文件(例如form-validation.js)来进行邮箱验证:
```javascript
function validateEmail() {
var emailInput = document.getElementById("email-input");
var emailError = document.getElementById("email-error");
var email = emailInput.value.trim();
// 检查是否为空
if (email === "") {
emailError.textContent = "邮箱地址不能为空";
return false;
} else {
emailError.textContent = "";
}
// 检查是否包含 '@' 和 '.'
if (!email.includes("@") || !email.includes(".")) {
emailError.textContent = "邮箱地址必须包含 '@' 和 '.'";
return false;
}
// 如果通过所有检查,说明邮箱有效
console.log("邮箱地址有效");
return true;
}
```
在这个例子中,当用户点击“验证”按钮时,`validateEmail()` 函数会被调用。它会检查邮箱输入是否为空,以及是否包含 "@" 和 "." 符号。如果不符合要求,会在页面上显示错误提示。
阅读全文