在 HTML 中使用表单验证可以通过以下步骤实现：
为表单元素添加验证属性，例如required,minlength,maxlength,pattern等。这些验证属性是 HTML5 的新特性，它们能够确保用户输入的值符合要求。
使用 JavaScript 监听表单提交事件，并编写相应的验证逻辑。例如，可以使用 getElementById() 方法获取表单元素的值，并使用条件语句对其进行验证。
在验证不通过时，使用 event.preventDefault() 方法防止表单提交，并向用户显示错误提示信息。可以使用 appendChild() 方法为 DOM 添加新的提示信息元素，或者使用 classList 属性添加、移除 CSS 类来控制提示信息的显示样式。
下面是一个简单的示例代码：
<form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required minlength="6">
<button type="submit">提交</button>
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username.length < 6) {
event.preventDefault();
const errorMsg = document.createElement('span');
errorMsg.textContent = '用户名长度必须大于等于6';
errorMsg.classList.add('error-msg');
form.appendChild(errorMsg);
}
});
</script>
<style>
.error-msg {
color: red;
}
</style>在上述代码中，表单中的用户名输入框设置了 required 和 minlength 属性，要求用户必须输入用户名并且长度大于等于6。JavaScript 中，监听了表单的提交事件，并根据输入框的值判断是否符合要求。在不符合要求时，阻止了表单的提交，并向表单末尾添加了一个红色的提示信息。
需要注意的是，在实际使用表单验证时，应该对所有可能出现错误的情况进行验证，并考虑到安全性问题，避免代码被恶意利用。