✨ 使用 TailwindCSS 为表单添加自定义验证
介绍
本文将介绍如何使用 TailwindCSS 为表单添加自定义验证。该表单是一个简单的 HTML 表单，可用于任何使用 TailwindCSS 的项目。
Github
点击此处查看完整源代码
先决条件
我们需要在现有项目中安装 Tailwind CSS。如果尚未安装，请按照本指南进行安装，就像本文中演示的那样。
基本形式结构
该表单是一个简单的登录表单，包含两个输入字段和一个提交按钮，并使用 TailwindCSS 添加了一些样式。
<main class="min-h-screen bg-blue-100 flex items-center justify-center text-gray-500 text-sm">
<form
class="bg-white shadow-lg rounded-md p-5 md:p-10 flex flex-col w-11/12 max-w-lg"
>
<label for="email" class="mb-5">
<span>Email</span>
<input
type="email"
name="email"
id="email"
class="w-full rounded border border-gray-300 bg-inherit p-3 shadow shadow-gray-100 mt-2 appearance-none outline-none text-neutral-800"
placeholder=" "
required
/>
</label>
<label for="password" class="mb-5">
<span>Password</span>
<input
type="password"
name="password"
id="password"
class="w-full rounded border border-gray-300 bg-inherit p-3 shadow shadow-gray-100 mt-2 appearance-none outline-none text-neutral-800"
placeholder=" "
required
/>
</label>
<button type="submit" class="mt-5 bg-blue-500 py-3 rounded-md text-white">Submit</button>
</form>
</main>
我们的表单有两个必填输入字段和一个提交按钮。每当我们给输入字段添加必填属性时，如果尝试在未填写完整字段的情况下提交表单，就会出现如下所示的错误。
这个弹出消息不太美观，在不同的浏览器中显示效果也不同，而且无法自定义样式。我们将探讨如何自定义此消息以满足我们的需求。
禁用默认验证消息
我们将使用novalidate表单上的属性来禁用默认验证消息。此属性将禁用默认验证消息，并允许我们添加自定义验证消息。
<!-- ... -->
<form
class="bg-white shadow-lg rounded-md p-5 md:p-10 flex flex-col w-11/12 max-w-lg"
novalidate
>
<!-- ... -->
为输入字段添加自定义验证
在 CSS 中，我们可以使用:invalid伪类来设置无效输入框的样式。Tailwind CSS 也提供了这种功能。当输入框无效时，我们会为其添加红色边框。此外，我们还可以向输入框添加正则表达式模式来强制应用特定的样式。
<!-- ... -->
<label for="email" class="mb-5">
<span>Email</span>
<input
type="email"
name="email"
id="email"
class="... invalid:[&:not(:placeholder-shown):not(:focus)]:border-red-500"
placeholder=" "
required
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
/>
</label>
<label for="password" class="mb-5">
<span>Password</span>
<input
type="password"
name="password"
id="password"
class="... invalid:[&:not(:placeholder-shown):not(:focus)]:border-red-500"
placeholder=" "
required
pattern=".{7,}"
/>
</label>
<!-- ... -->
我们使用标准的正则表达式模式来检查电子邮件字段是否有效。
对于密码字段，我们使用正则表达式模式来检查密码是否至少包含 7 个字符。
我们还为该类添加了一些 Tailwind 类，invalid以便在输入无效时设置输入字段的样式。让我们来详细了解一下。
- 我们使用任意变体来向
invalid类添加自定义修饰符。 :not(:placeholder-shown)这样可以确保输入框不为空。如果输入框为空，我们不希望显示红色边框。因此，我们在占位符中使用了空格。我们也可以在占位符中使用类似“请输入您的邮箱”这样的文本。:not(:focus)这将确保输入框未获得焦点。我们不希望在输入框获得焦点时（即用户正在输入内容时）显示红色边框。
添加自定义验证消息
我们将使用该类peer添加自定义验证消息。peer该类允许我们根据另一个元素的状态来设置元素的样式。在本例中，我们将<span>根据输入字段的状态来设置元素的样式。
<!-- ... -->
<label for="email" class="mb-5">
<span>Email</span>
<input
type="email"
name="email"
id="email"
class="... peer"
placeholder=" "
required
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
/>
<span class="mt-2 hidden text-sm text-red-500 peer-[&:not(:placeholder-shown):not(:focus):invalid]:block">
Please enter a valid email address
</span>
</label>
<!-- ... -->
我们将该peer类添加到输入字段，然后将该peer类链接到我们用于输入字段的任意变体，以便在输入字段无效时将<span>元素的样式从更改display: none为。display: block
现在，我们已经为表单添加了自定义验证样式和消息。但是，即使字段未填写或字段无效，我们仍然可以提交表单。接下来，我们将探讨如何防止在字段为空时提交表单。
阻止表单提交
我们将使用group表单上的类来防止在字段为空或无效时提交表单。与该类类似peer，该类group允许我们根据父元素的状态来设置元素的样式。
由于输入字段嵌套在表单内部，因此当任何一个输入字段无效时，表单都将无效。我们可以利用这一点来禁用按钮并阻止表单提交。
<!-- ... -->
<form
class="... group"
novalidate
>
<!-- ... -->
<button type="submit" class="... group-invalid:pointer-events-none group-invalid:opacity-30">Submit</button>
</form>
<!-- ... -->
我们使用:invalid伪类来设置表单无效时按钮的样式。我们还将该类链接group-invalid到 `<div>`pointer-events-none和 ` opacity-50<span>` 类，以便在表单无效时禁用按钮并使其更加透明。
最终效果
结论
TailwindCSS 让无需 JavaScript 即可轻松为表单添加自定义验证样式和消息。我们也可以继续使用 JavaScript 为表单添加更多功能。希望您喜欢这篇文章。如有任何疑问，请在下方评论区留言。