css 输入值设置不能为空_如何使用CSS检查输入是否为空

css 输入值设置不能为空

by Zell Liew

由Zell Liew

如何使用CSS检查输入是否为空 (How to check if an input is empty with CSS)

Is it possible to know if an input is empty with only CSS?

是否可以仅使用CSS知道输入是否为空？

I had that question when I tried to make an autocomplete component for Learn JavaScript. Basically, I wanted to:

当我尝试为学习JavaScript创建自动完成组件时遇到了这个问题。 基本上，我想：

1. Hide a drop-down if the input is empty
   如果输入为空，则隐藏下拉菜单
2. Show the drop-down if the input is filled
   如果输入已填写，则显示下拉菜单

I found a way to do it. It’s not perfect. There are a few nuances involved, but I want to share it with you.

我找到了一种方法。 这不是完美的。 涉及一些细微差别，但我想与您分享。

表格 (The form)

First, let’s build a form so we’re on the same page. We’re going to use a simple form with one input.

首先，让我们构建一个表单，以便我们位于同一页面上。 我们将使用一个带有一个输入的简单形式。

<form>  <label for="input"> Input </label>  <input type="text" id="input" /></form>

When the input is filled, we want to change its border-color to green. Here’s an example of what we’re creating:

输入填满后，我们想将其border-color更改为绿色。 这是我们正在创建的示例：

检查输入是否为空 (Checking if the input is empty)

I relied on HTML form validation to check whether the input was empty. That meant I needed a required attribute.

我依靠HTML表单验证来检查输入是否为空。 那意味着我需要一个required属性。

<form>  <label> Input </label>  <input type="text" name="input" id="input" required /></form>

At this point, it worked fine when the input was filled. Borders turned green.

在这一点上，当输入被填充时，它工作正常。 边框变成绿色。

But there was a problem: if the user enters a whitespace into the field, the borders turn green too.

但是有一个问题：如果用户在字段中输入空白，则边框也会变为绿色。

Technically, this is correct. The input is filled because the user typed something into it.

从技术上讲，这是正确的。 输入被填充，因为用户在其中输入了一些内容。

But I didn’t want whitespaces to trigger a blank dropdown menu (for the autocomplete component).

但是我不希望空格触发空白的下拉菜单(对于自动完成组件)。

It wasn’t enough. I needed a more stringent check.

这还不够。 我需要更严格的检查。

进一步检查 (Further checks)

HTML gives you the ability to validate inputs with regular expressions with the pattern attribute. I decided to test it out.

HTML使您能够使用带有pattern属性的正则表达式来验证输入。 我决定进行测试。

Since I didn’t want whitespaces to be recognized, I started with the \S+ pattern. This pattern meant: One or more characters that’s not a whitespace.

由于我不希望空格被识别，因此我从\S+模式开始。 这种模式的意思是：一个或多个不是空格的字符。

<form>  <label> Input </label>  <input type="text" name="input" id="input" required pattern="\S+"/></form>

Sure enough, it worked. If a user enters a whitespace into the field, the input doesn’t get validated.

果然，它奏效了。 如果用户在该字段中输入空格，则该输入不会得到验证。

But when a whitespace is entered (anywhere) into the input, the input gets invalidated.

但是，当在任何地方(任何地方)输入空白时，输入将变得无效。

Unfortunately, this pattern didn’t work in my use case.

不幸的是，这种模式在我的用例中不起作用。

In Learn JavaScript’s autocomplete component, I taught students how to complete a list of countries. The names of some countries had spaces…

在“学习JavaScript”的自动完成组件中，我教了学生如何完成国家/地区列表。 一些国家的名称带有空格...

I had to include whitespaces in the mix.

我必须在组合中包括空格。

The next best alternative I could think of is \S+.*. This means 1 or more non-whitespace characters, followed by zero or more (any) characters.

我能想到的下一个最佳选择是\S+.* 。 这意味着1个或多个非空白字符，后跟零个或多个(任何)字符。

<form>  <label> Input </label>  <input type="text" name="input" id="input" required pattern="\S+.*"/></form>

This worked! I can enter whitespaces into the mix now!

这工作了！ 我现在可以将空白输入！

But there’s one more problem… the input doesn’t validate if you START with a whitespace…

但是还有另一个问题……如果您以空格开头，输入将无法验证……

And that’s the problem I couldn’t resolve. More on this later.

这就是我无法解决的问题。 稍后再详细介绍。

When I worked on this article, I came across another interesting question: Is it possible to style an invalid state when the input is filled incorrectly?

当我撰写本文时，我遇到了另一个有趣的问题：如果输入的填充不正确，是否可以设置无效状态的样式？

使输入无效 (Invalidating the input)

We don’t want to use :invalid because we’ll kickstart the input with an invalid state. (When the input is empty, it’s already invalid).

我们不想使用:invalid因为我们将以无效状态启动输入。 (当输入为空时，它已经无效)。

This is where Chris Coyier swooped in to the rescue with “ Form Validation UX in HTML and CSS”.

这就是Chris Coyier通过“ HTML和CSS中的Form Validation UX ”进行抢救的地方。

In the article, Chris talks about a :placeholder-shown pseudo-class. It can be used to check whether a placeholder is shown.

在本文中，克里斯谈论了一个:placeholder-shown伪类。 它可用于检查是否显示了占位符。

The idea is:

这个想法是：

1. You add a placeholder to your input
   您将占位符添加到输入中
2. If the input is hidden, it means the user typed something into the field
   如果输入是隐藏的，则意味着用户在该字段中输入了一些内容
3. Proceed with validation (or invalidation)
   进行验证(或无效)

Here’s the CSS (simplified version. For the complete version, check out Chris’s article.)

这是CSS(简化版本。有关完整版本，请参阅Chris的文章 。)

/* Show red borders when filled, but invalid */input:not(:placeholder-shown) {  border-color: hsl(0, 76%, 50%);}

Since I had both validation AND invalidation styles, I had to ensure the valid styles came after the invalid styles.

由于我同时具有验证样式和无效样式，因此我必须确保有效样式紧随无效样式之后。

/* Show red borders when filled, but invalid */input:not(:placeholder-shown) {  border-color: hsl(0, 76%, 50%);;}

/* Show green borders when valid */input:valid {  border-color: hsl(120, 76%, 50%);}

Here’s a demo for you to play with:

这是一个演示供您玩：

See the Pen Pure CSS Empty validation by Zell Liew (@zellwk) on CodePen.

见笔纯CSS空验证通过泽尔与Liew( @zellwk )上CodePen 。

Note: Edge doesn’t support :placeholder-shown, so it’s probably not a good idea to use it in production yet. There’s no good way to detect this feature.

注意：Edge不支持:placeholder-shown ，因此在生产中使用它可能不是一个好主意。 没有检测此功能的好方法。

Now back to the problem I couldn’t resolve.

现在回到我无法解决的问题。

模式的问题 (The problem with pattern)

The pattern attribute is wonderful because it lets you accept a regular expression. This regular expression lets you validate the input with anything you can think of.

pattern属性很棒，因为它允许您接受正则表达式。 通过此正则表达式，您可以使用任何可以想到的内容来验证输入。

But… the regular expression must match the text completely. If the text doesn’t get matched completely, the input gets invalidated.

但是…… 正则表达式必须完全匹配文本 。 如果文本没有完全匹配，则输入无效。

This created the problem I mentioned above. (Reminder of the problem: If a user enters a whitespace first, the input becomes invalid).

这造成了我上面提到的问题。 (问题提醒：如果用户首先输入空格，则输入无效)。

I couldn’t find a regular expression that worked for all use-cases that I thought of. If you want to try your hand at creating a regular expression that I need, I’d be more than happy to receive the help!

我找不到适合我想到的所有用例的正则表达式。 如果您想尝试创建我需要的正则表达式，我将非常高兴获得帮助！

Here are the use-cases:

这里是用例：

// Should not match''' ''  ''   '

// Should match'one-word''one-word '' one-word'' one-word ''one phrase with whitespace''one phrase with whitespace '' one phrase with whitespace'' one phrase with whitespace '

(Then again, I might be overthinking it… ?).

(再说一次，我可能会想得太多……？)。

更新：问题解决了！ (Update: Problem solved!)

Many readers were generous enough to email me their solutions. I want to thank everyone who helped. Thank you so much!

许多读者都很慷慨地向我发送解决方案的电子邮件。 我要感谢所有帮助的人。 非常感谢！

The cleanest solution I received is: .*\S.* by Daniel O’Connor. This means:

我收到的最干净的解决方案是： Daniel O'Connor的 。 .*\S.* 。 这表示：

• .*: Any character

  .* ：任何字符

• \S: Followed one non-whitespace character

  \S ：后跟一个非空白字符

• .*: Followed by any character

  .* ：后跟任何字符

Other regexes I received include:

我收到的其他正则表达式包括：

• .*\S+.*by Matt Mink

  .*\S+.* ，作者Matt Mink

• \s*\S.* by Sungbin Jo

  \s*\S.*作者Sungbin Jo

• ^\s?(?=\S). with a lookahead by Konstantin

  ^\s?(?=\S). 康斯坦丁前瞻

And many others!

还有很多！

Here’s a codepen with the updated solution by Daniel.

这是丹尼尔(Daniel)更新后的解决方案的Codepen 。

结语 (Wrapping up)

Yes, it is possible to validate a form with pure CSS. There are potential problems with validation when whitespace characters are involved.

是的，可以使用纯CSS验证表单。 涉及空白字符时，验证存在潜在的问题。

If you don’t mind the whitespaces, it works perfectly. Have fun trying this pattern out! (Sorry, I can’t help it).

如果您不介意空格，则可以完美地工作。 尝试这种模式，玩得开心！ (对不起，我无能为力)。

Thanks for reading. Did this article help you out? If it did, I hope you consider sharing it. You might help someone else out. Thanks so much!

谢谢阅读。 这篇文章对您有帮助吗？ 如果确实如此，希望您考虑共享它 。 您可能会帮助别人。 非常感谢！

This article was originally posted at my blog. Sign up for my newsletter if you want more articles to help you become a better front-end developer.

本文最初发布在我的博客上 。 如果您想要更多文章来帮助您成为更好的前端开发人员，请注册我的新闻通讯 。

翻译自: https://www.freecodecamp.org/news/how-to-check-if-an-input-is-empty-with-css-1a83715f9f3e/

css 输入值设置不能为空