csshtml表单样式_再见，jQuery验证：CSSHTML5表单错误

最新推荐文章于 2022-05-27 16:50:11 发布

cungui5726

最新推荐文章于 2022-05-27 16:50:11 发布

阅读量167

点赞数

文章标签：数据库 java python html 人工智能

原文链接：https://thenewcode.com/462/Goodbye-JQuery-Validation-HTML5-Form-Errors-With-CSS

版权

csshtml表单样式

CSS allows for the detection of the status of HTML5 form elements through the use of the pseudo-class selectors :valid and :invalid. For the purposes of demonstration I’ll use the email input to start, as it has built-in validation:

CSS允许通过使用伪类选择器 :valid和:invalid来检测HTML5表单元素的状态。出于演示目的，我将使用电子邮件输入来启动，因为它具有内置的验证：

<input type="email" name="email" id="email">

Detecting whether the user has entered information correctly in the field is simple, using an attribute selector combined with the :valid pseudo-class:

使用attribute selector与:valid伪类结合使用，可以很容易地检测用户是否在字段中正确输入了信息：

input[type=email]:valid {
	/* appearance for valid entry */
}

Changing the appearance of the input is good and fine, but I wanted to take the effect further, and add an error message if the information entered by the user was incorrect. One would think we could chain pseudo-class selectors together:

更改input的外观很好，但是我想进一步提高效果，如果用户输入的信息不正确，则添加错误消息。有人认为我们可以将伪类选择器链接在一起：

input[type=email]:invalid:after {
	content: “Error message”;
}

Sadly, we cannot use :after or :before directly on a form input. Like the <img> tag it is a replaced element. All is not yet lost: there is another way.

可悲的是，我们不能在表单input上直接使用:after或:before 。像<img>标签一样，它是一个替换元素。一切还没有丢失：还有另一种方式。

The technique that follows can be used on any input: let’s change the type attribute to text to keep things interesting. For this example, let’s say we are looking for a user’s first name. In that case, the regular expression we’ll use for pattern will be very simple: we won’t accept numerals, but anything else comprised of at least two upper or lowercase letters will be fine:

以下技术可用于任何输入：让我们将type属性更改为text以使事情有趣。对于此示例，假设我们正在寻找用户的名字。在这种情况下，我们将用于pattern的正则表达式将非常简单：我们将不接受数字，但由至少两个大写或小写字母组成的其他任何形式都可以：

<input type="text" name="firstname" id="firstname"  pattern="[^0-9][A-Za-z]{2,20}">

I’ll also add a span immediately after the input, with a title attribute that contains an error message associated with invalid content:

我还将在输入之后立即添加一个span ，其title属性包含与无效内容相关的错误消息：

<input type="text" name="firstname" id="firstname" pattern="[^0-9][A-Za-z]{2,20}">
<span title="Must be at least two letters, no numbers"></span>

We want to complete the span with the text of the title attribute. This will also mean that browsers that don’t support this part of CSS won’t see the text, creating a state of graceful degradation. We’ll make sure it’s the span element immediately after the input by using a sibling selector:

我们要使用title属性的文本来完成span 。这也意味着不支持CSS此部分的浏览器将看不到文本，从而造成正常降级的状态。我们将使用同级选择器来确保它是输入之后的span元素：

input ~ span:after {
	content: attr(title);
	color: red;
	margin-left: 0.6rem;
}

The default appearance of any generated content in the span will be invisible, via use of opacity:

通过使用opacity ， span内任何生成的内容的默认外观将是不可见的：

input ~ span:after {
	content: attr(title);
	color: red;
	margin-left: 0.6rem;
	opacity: 0;
}

… but we’ll change that based on the invalidity of the information entered into the field immediately before it:

…但是我们将根据紧接在该字段之前的字段中输入的信息的无效性来进行更改：

input:invalid ~ span:after {
	opacity: 1;
}

Done! But the appearance of the error message is a little sudden and clunky: it shows up just as soon as we type the first letter in the field, potentially distracting and confusing users. We’ll delay and fade in the message by using transition-property, duration and delay:

做完了！但是错误消息的出现有点突然且笨拙：只要我们在该字段中输入第一个字母，它就会立即出现，这可能会分散用户的注意力并使他们感到困惑。我们将使用transition-property ， duration和delay来延迟和淡入消息：

input ~ span:after {
	content: attr(title);
	color: red;
	margin-left: 0.6rem;
	opacity: 0;
	transition: opacity 2s 2s;
}

You can see the completed effect in the small form at the top of this article.

您可以在本文顶部的小格式中看到完成的效果。

These techniques do not completely eliminate JavaScript from forms: you’ll still need the scripting technology for features like AJAX validation (checking if a username is already registered in a database, for example), or to recreate the same effect in older browsers. JavaScript can also be used to customize the browser's own built-in validation error messages, as I show in the next article.

这些技术不能完全从表单中消除JavaScript ：您仍然需要脚本技术来实现诸如AJAX验证之类的功能(例如，检查用户名是否已在数据库中注册)，或者在较旧的浏览器中重新创建相同的效果。 JavaScript也可以用于自定义浏览器的内置验证错误消息，如我在下一篇文章中所示。

You’ll also need PHP or some other server-side technology to act as a secure, impassable fallback for ultimate validation of user-submitted data. But the techniques demonstrated here continue to do what CSS should: push JavaScript into more advanced and useful areas, rather than being used for simple actions on a page.