的实现方式如下:
<!DOCTYPE html>
<html>
<head>
<title>表单验证示例</title>
<style>
#hiddenDiv {
display: none;
}
</style>
</head>
<body>
<form id="myForm">
<label for="name">姓名:</label>
<input type="text" id="name" required>
<br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" required>
<br><br>
<input type="submit" value="提交" onclick="validateForm(event)">
</form>
<div id="hiddenDiv">
这是隐藏的div,表单输入不为空时显示。
</div>
<script>
function validateForm(event) {
event.preventDefault(); // 阻止表单默认提交行为
var nameInput = document.getElementById("name");
var emailInput = document.getElementById("email");
if (nameInput.value !== "" && emailInput.value !== "") {
document.getElementById("hiddenDiv").style.display = "block";
}
}
</script>
</body>
</html>
在上面的示例中,通过JavaScript代码实现了对姓名和邮箱输入框的非空验证。当点击提交按钮时,会调用validateForm
函数。该函数首先使用document.getElementById
方法获取姓名和邮箱的输入框元素,并检查它们的值是否为空。如果都不为空,则将隐藏的div的display
属性设置为"block",使其显示出来。
const express = require('express');
const app = express();
app.use(express.urlencoded({ extended: true }));
app.get('/', (req, res) => {
res.send(`
<form action="/submit" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<br><br>
<input type="submit" value="提交">
</form>
`);
});
app.post('/submit', (req, res) => {
const { name, email } = req.body;
if (name !== "" && email !== "") {
res.send(`
<div>
这是隐藏的div,表单输入不为空时显示。
</div>
`);
} else {
res.send("表单输入不能为空。");
}
});
app.listen(3000, () => {
console.log('服务器已启动,监听端口3000。');
});
在上述Node.js示例中,使用express框架创建了一个简单的Web应用。当用户访问根路径时,会返回一个包含表单的HTML页面。在表单提交后,会在/submit
路由上接收POST请求,并从请求体中获取姓名和邮箱的值。然后,通过非空验证判断是否显示隐藏的div。
以上是一个简单的示例,涵盖了前端开发、后端开发和腾讯云相关产品的应用。根据具体需求和实际情况,可以选择适合的技术和产品来实现表单验证和显示隐藏的div。
领取专属 10元无门槛券
手把手带您无忧上云