HTML 非空验证：表单验证入门示例

以下是一个简单的 HTML 非空验证示例，演示如何使用 JavaScript 代码验证表单输入字段是否为空。

<!DOCTYPE html>
<html>
<head>
	<title>HTML 非空验证</title>
	<script>
		function validateForm() {
			var x = document.forms['myForm']['username'].value;
			if (x == '') {
				alert('用户名不能为空');
				return false;
			}
		}
	</script>
</head>
<body>
	<form name='myForm' onsubmit='return validateForm()' method='post'>
		<label for='username'>用户名:</label>
		<input type='text' id='username' name='username'><br><br>
		<input type='submit' value='Submit'>
	</form>
</body>
</html>

在这个示例中，我们创建了一个名为 'myForm' 的表单，并使用 'onsubmit' 事件调用 'validateForm()' 函数。该函数检查 'username' 输入字段是否为空，如果为空则显示一个警告消息，并返回 'false' 以阻止表单提交。如果输入字段不为空，则返回 'true' 以允许表单提交。

请注意，我们在输入字段上使用了 'id' 和 'name' 属性，以便在 JavaScript 代码中引用该字段。如果您需要验证多个字段，只需重复该过程即可。

当用户试图提交表单时，如果输入字段为空，则会弹出一个警告消息。否则，表单将被提交并可以进一步处理。