请看下面的详细讲解：

纯CSS3实现表单验证效果(非常不错)

介绍

这是一种使用纯CSS3技术实现输入表单的验证效果的方法，无需使用JavaScript。这种方法基于CSS3中的:checked伪类选择器实现，有助于简化代码并提高浏览器性能。这种方法可以用于输入表单的各种类型的验证，例如：是否位数符合要求、是否为空、是否是正确的邮箱格式等。

步骤

Step 1

首先，我们需要使用HTML和CSS创建一个基本的输入表单。

<form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required="required" />
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required="required" />
    <input type="submit" value="提交" />
</form>

form {
    width: 300px;
    margin: 0 auto;
}

label {
    display: block;
    margin-bottom: 5px;
}

input {
    width: 100%;
    margin-bottom: 10px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

input[type="submit"] {
    background-color: #4CAF50;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

input[type="submit"]:hover {
    background-color: #3e8e41;
}

这段代码创建了一个基本的表单，包含用户名和密码两个输入框，以及一个提交按钮。

Step 2

接下来，我们需要为每个输入框创建一个关联的标签（label），并使用:checked伪类选择器为每个标签添加验证效果。这里我们以验证用户名是否为空为例。

<form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required="required" />
    <label for="username" class="error">请输入用户名！</label>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required="required" />
    <input type="submit" value="提交" />
</form>

label.error {
    display: none;
    color: red;
}

input[type="text"]:invalid + label.error {
    display: block;
}

这段代码为每个输入框后面添加了一个label元素，然后定义了一个class为.error的样式，来控制错误提示信息的样式。在CSS中，使用+:伪类选择器表示选取后一个紧贴在前一个元素之后的元素。这里我们使用input:text:invalid选择器表示当文本框的值为空时选取该标签，并为该标签添加一个.error类。

Step 3

最后，我们需要为提交按钮添加鼠标悬停效果。

input[type="submit"] {
    ...
    transition: all 0.3s ease-in-out;
}

input[type="submit"]:hover {
    background-color: #3e8e41;
}

这段代码为提交按钮添加了一个鼠标悬停的颜色变化效果。

示例

示例1

<form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required="required" />
    <label for="username" class="error">请输入用户名！</label>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required="required" />
    <input type="submit" value="提交" />
</form>

label.error {
    display: none;
    color: red;
}

input[type="text"]:invalid + label.error {
    display: block;
}

这个示例验证用户名文本框是否为空，如果为空则显示错误提示信息。

示例2

<form>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required="required" />
    <label for="email" class="error">请输入正确的邮箱格式！</label>
    <input type="submit" value="提交" />
</form>

label.error {
    display: none;
    color: red;
}

input[type="email"]:invalid + label.error {
    display: block;
}

这个示例验证邮箱文本框输入的格式是否正确，如果格式不正确则显示错误提示信息。

以上就是纯CSS3实现表单验证效果的完整攻略。