如何检查html元素的内容是不是为空？
Posted
技术标签:
【中文标题】如何检查html元素的内容是不是为空？【英文标题】：How to check if content of an html element is empty?如何检查html元素的内容是否为空？ 【发布时间】：2022-01-04 04:39:45 【问题描述】：我正在构建一个简单的 php 登录表单，其中包含必填字段和验证。无论必填字段，我都想为每个未填写的输入元素显示一条错误消息。但我在途中遇到了一个问题。当 span 元素中没有内容时，我用于样式的 span 元素不会消失。我写了一些 javascript 代码，但它不起作用。我希望 span 元素在没有内容时隐藏，因为 $nameerr 在开始时等于 ""。当$nameerr 等于"Name Required" 字符串时，span 元素应该只在当时可见。如何实现？
注意：我只想在实现其他变量之前先测试$name和$nameerr，所以其他变量是""。
这是我的 php 代码：
<?php include('validate.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning PHP</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row justify-content-center" style="height:auto;background-color:#ffcb05;">
<div class="col-lg-4" style="background-color:#fcd670;">
<form action="<?php $_SERVER['PHP_SELF']; ?>" method="post">
<div class="d-flex flex-column">
<div class="mb-3">
<label for="name" class="form-label">Name:</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Please enter your name" style="width:100%;">
<span class="badge bg-danger float-end" id="error1">
<?php echo $nameerr; ?>
</span>
</div>
<div class="mb-3">
<label for="email" class="form-label">E-mail</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Please enter your e-mail" style="width:100%;">
</div>
<div class="mb-3">
<label for="website" class="form-label">Website</label>
<input type="url" name="website" id="website" class="form-control" placeholder="Please enter your website" style="width:100%;">
</div>
<div class="mb-3">
<label for="comment">Comment</label>
<textarea name="comment" id="comment" cols="45" rows="5" class="form-control"></textarea>
</div>
<div class="mb-3">
<label>Gender</label>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other">
</div>
<div class="mb-3">
<button class="btn btn-primary float-end" type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
var content=document.getElementById('error1').innerHTML;
if(content=="")
document.getElementById('error1').style.display="none";
else
ocument.getElementById('error1').style.display="block";
</script>
</body>
</html>
这是我的 validate.php 文件：
<?php
$name=$email=$website=$comment=$gender='';
$nameerr=$emailerr=$websiteerr=$commenterr=$gendererr='';
if($_SERVER["REQUEST_METHOD"]=="POST")
if(empty($_POST['name']))
$nameerr="Name Required";
else
$name=validateInput($_POST["name"]);
$email=validateInput($_POST["email"]);
$website=validateInput($_POST["website"]);
$comment=validateInput($_POST["comment"]);
$gender=validateInput($_POST["gender"]);
echo $name."<br>".$email."<br>".$website."<br>".$comment."<br>".$gender."<br>";
function validateInput($data)
$data=trim($data);
$data=stripslashes($data);
$data=htmlspecialchars($data);
return $data;
【问题讨论】：
如果你只想在元素为空时隐藏它，你可以在css中使用:empty吗？ 【参考方案1】：您可以使用客户端方法 (javascript)。
-
在提交时检测名称字段是否为空
如果是，则使 error1 消息可见，否则使其不可见
如果您愿意，可以添加更多块以进行进一步验证
如果没有其他错误，返回 true（提交）
所以改变
<form action="<?php $_SERVER['PHP_SELF']; ?>" method="post">
到
<form action="<?php $_SERVER['PHP_SELF']; ?>" method="post" onsubmit="return validateform();">
改变
<span class="badge bg-danger float-end" id="error1">
<?php echo $nameerr; ?>
</span>
到
<span class="badge bg-danger float-end" id="error1" style="display:none;">
Name Required !!!!
</span>
并添加以下内容：
<script>
function myTrim(x)
return x.replace(/^\s+|\s+$/gm,'');
function validateform()
if(myTrim(document.getElementById('name').value)=="")
document.getElementById('error1').style.display="block";
return false;
else
document.getElementById('error1').style.display="none";
// if no errors at all
return true;
</script>
【讨论】：
【参考方案2】：你在那里有填充。 所以你可以尝试移除班级徽章
<span class="bg-danger float-end" id="error1">
<?php echo $nameerr; ?>
</span>
或从该类中删除填充
.badge
display: inline-block;
/* padding: 0.35em 0.65em;*/
【讨论】：
【参考方案3】：在我看来。我认为您不需要使用 javascript 来显示/隐藏错误内容。 你可以试试下面的代码块：
<?php if(!empty($nameerr)): ?>
<span class="badge bg-danger float-end" id="error1">
<?php echo $nameerr; ?>
</span>
<?php endif; ?>
【讨论】：
以上是关于如何检查html元素的内容是不是为空？的主要内容，如果未能解决你的问题，请参考以下文章