HTML 非空验证：简单示例和最佳实践

以下是一个基本的 HTML 非空验证的示例：

<!DOCTYPE html>
<html>
<head>
	<title>HTML 非空验证</title>
	<script type="text/javascript">
		function validateForm() {
			var x = document.forms["myForm"]["myInput"].value;
			if (x == "") {
				alert('请输入内容！');
				return false;
			}
		}
	</script>
</head>
<body>
	<form name="myForm" onsubmit="return validateForm()" method="post">
		<label for="myInput">请输入内容：</label>
		<input type="text" name="myInput" id="myInput">
		<input type="submit" value="提交">
	</form>
</body>
</html>

在这个示例中，我们创建了一个表单，包含一个文本输入框和一个提交按钮。我们使用 JavaScript 来验证输入框是否为空。在 `validateForm()` 函数中，我们首先获取输入框的值，然后检查它是否为空。如果是空的，我们显示一个警告框并返回 `false`，以防止表单提交。否则，表单将提交并执行其他操作。最后，我们将 `validateForm()` 函数与表单的 `onsubmit` 事件关联，以便在提交表单时自动调用该函数。

请注意，这只是一个基本的示例，您可以根据自己的需要进行修改和扩展。例如，您可以添加更多的输入字段，并对它们进行验证。您还可以使用不同的验证规则，例如验证电子邮件地址或电话号码等。

最佳实践：

使用 HTML5 的 `required` 属性可以更简洁地进行非空验证。
使用正则表达式可以进行更复杂的验证，例如电子邮件地址或电话号码的验证。
将验证逻辑放在客户端和服务器端，以确保数据的完整性和安全性。
提供清晰的错误提示，帮助用户纠正错误。