css实现表单验证_通过CSS3和HTML5验证使表单保持最新状态

css实现表单验证

让我们看一下如何创建一个功能形式的客户端验证用户数据。完成之后，我们将介绍如何使用CSS（包括一些CSS3）对其进行修饰！

在开始之前，您可能需要考虑为下一个项目使用我们的HTML5模板或CSS主题之一，也就是说，如果您需要快速，专业的解决方案。或者，您可以从Envato Studio的专家那里获得帮助。

否则，该开始逐步教程了。

步骤1：概念化功能

首先，我们要概念化表单的外观以及其功能。对于此示例，让我们创建一个简单的联系表单，该表单要求用户提供以下信息：

名称
电子邮件
网站
信息

我们要确保用户正确输入信息。为此，我们将使用HTML5的新客户端验证技术。没有HTML5功能的用户呢？您可以简单地使用服务器端验证，但这将超出本文的范围。

步骤2：概念化表格

让我们通过创建一个粗糙的模型来了解我们希望表单的外观。

如您所见，以下元素构成了我们的表单：

表单标题必填字段通知
表格标签
表单输入占位符文本
表单字段提示
提交按钮

现在我们已经指定了组成表单的元素，我们可以创建HTML标记。

步骤3：HTML入门代码

让我们从创建的表单概念创建基本HTML标记。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML5 Contact Form</title>
	<link rel="stylesheet" media="screen" href="styles.css" >
</head>
<body>
</body>
</html>

到目前为止，我们HTML文件在浏览器中仍将显示为空白。这只是HTML5页面的入门代码。

步骤4：HTML表单

让我们创建HTML表单（由于本教程将不涉及服务器端验证，因此现在将action方法保留为空白）：

<form class="contact_form" action="" method="post" name="contact_form">
</form>

步骤5：HTML表单元素

为了使表单内容保持井井有条，我们将表单元素（ label ， input等）包装在列表中。因此，让我们从创建表单标题和第一个输入元素开始：

<ul>
    <li>
         <h2>Contact Us</h2>
         <span class="required_notification">* Denotes Required Field</span>
    </li>
    <li>
        <label for="name">Name:</label>
        <input type="text" name="name" />
    </li>
</ul>

表格提示

从我们的模型中可以看出，我们将为“电子邮件”和“网站”字段提供格式化提示。因此，我们将在必要时在input字段下添加提示，并为它们提供一个类，以便稍后进行样式设置。

<li>
	<label for="email">Email:</label>
	<input type="text" name="email" />
	<span class="form_hint">Proper format "name@something.com"</span>
</li>

剩余的`Input`元素

让我们继续创建剩余的表单元素，记住将每个部分包装在列表项中。

<li>
	<label for="website">Website:</label>
	<input type="text" name="website" />
	<span class="form_hint">Proper format "http://someaddress.com"</span>
</li>
<li>
	<label for="message">Message:</label>
	<textarea name="message" cols="40" rows="6" >
</li>
<li>
	<button class="submit" type="submit">Submit Form</button>
</li>

步骤6：添加占位符属性

HTML5给Web表单（您可能已经很熟悉）带来的第一个改进就是设置占位符文本的功能。当输入字段为空或焦点不清晰时，将显示占位符文本。

让我们将占位符属性添加到我们的input元素中。这将帮助用户了解他们应该在每个字段中输入什么。

<input type="text" name="name" placeholder="John Doe" />
<input type="text" name="email" placeholder="john_doe@example.com" />
<input type="text" name="website" placeholder="http://johndoe.com/" required/>

快速提示：设置`placeholder`文本的样式

这里有个快速提示，如果您想为占位符文本设置样式，可以使用一些浏览器前缀来帮助您：

:-moz-placeholder {
	color: blue;
}

::-webkit-input-placeholder {
	color: blue;
}

在现代浏览器中，已经很好地建立了对占位符属性的支持（IE9除外，抱歉）。如果您确实需要所有浏览器都支持它，可以考虑使用一些javascript解决方案。

步骤7：基本CSS

让我们添加一些基本CSS来为表单提供一些结构。我将指导您完成以下规则：

删除`:focus`样式

Webkit会在焦点对准时自动向输入元素添加一些样式。由于我们将添加自己的样式，因此我们想覆盖以下默认值：

*:focus {outline: none;}

印刷风格

让我们向表单元素添加一些印刷样式：

body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
.contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}
.form_hint, .required_notification {font-size: 11px;}

清单样式

让我们对列表元素进行样式设置以使表单具有一些结构：

.contact_form ul {
    width:750px;
    list-style-type:none;
	list-style-position:outside;
	margin:0px;
	padding:0px;
}
.contact_form li{
	padding:12px; 
	border-bottom:1px solid #eee;
	position:relative;
}

另外，让我们在表单的顶部和底部添加一个轻微的边框。我们可以通过:first-child和:last-child选择器来完成。顾名思义，它们选择<ul>列表中的第一个和最后一个元素。

这为我们的表单添加了一些有用的可视化部分。请记住，较旧的浏览器不支持这些CSS选择器。由于这对关键功能并不重要，因此我们在奖励使用当前浏览器的用户。

.contact_form li:first-child, .contact_form li:last-child {
	border-bottom:1px solid #777;
}

表格标题

让我们设置表单标题的样式。这包括标题标签和通知，通知用户星号（*）表示必填字段。

.contact_form h2 {
	margin:0;
	display: inline;
}
.required_notification {
	color:#d45252; 
	margin:5px 0 0 0; 
	display:inline;
	float:right;
}

表单输入元素

让我们对所有核心表单元素（用于收集用户信息的元素）进行样式设置。

.contact_form label {
	width:150px;
	margin-top: 3px;
	display:inline-block;
	float:left;
	padding:3px;
}
.contact_form input {
	height:20px; 
	width:220px; 
	padding:5px 8px;
}
.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:156px;}

现在，让我们添加一些额外的视觉CSS样式。其中一些是CSS3样式，用于奖励使用现代浏览器的用户。

.contact_form input, .contact_form textarea { 
	border:1px solid #aaa;
	box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
	border-radius:2px;
}
.contact_form input:focus, .contact_form textarea:focus {
	background: #fff; 
	border:1px solid #555; 
	box-shadow: 0 0 3px #aaa; 
}
/* Button Style */
button.submit {
	background-color: #68b12f;
	background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
	background: -webkit-linear-gradient(top, #68b12f, #50911e);
	background: -moz-linear-gradient(top, #68b12f, #50911e);
	background: -ms-linear-gradient(top, #68b12f, #50911e);
	background: -o-linear-gradient(top, #68b12f, #50911e);
	background: linear-gradient(top, #68b12f, #50911e);
	border: 1px solid #509111;
	border-bottom: 1px solid #5b992b;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	box-shadow: inset 0 1px 0 0 #9fd574;
	-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
	-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
	-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
	-o-box-shadow: 0 1px 0 0 #9fd574 inset;
	color: white;
	font-weight: bold;
	padding: 6px 20px;
	text-align: center;
	text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
	opacity:.85;
	cursor: pointer; 
}
button.submit:active {
	border: 1px solid #20911e;
	box-shadow: 0 0 10px 5px #356b0b inset; 
	-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
	-moz-box-shadow: 0 0 10px 5px #356b0b inset;
	-ms-box-shadow: 0 0 10px 5px #356b0b inset;
	-o-box-shadow: 0 0 10px 5px #356b0b inset;
	
}

步骤8：与CSS3添加一些交互性

让我们添加一点交互性。我们将通过添加一些填充使当前选定的字段扩展。

.contact_form input:focus, .contact_form textarea:focus { /* add this to the already existing style */
	padding-right:70px;
}

现在，对于支持此功能的浏览器，让我们使用CSS3平滑扩展该字段。

.contact_form input, .contact_form textarea { /* add this to the already existing style */
	-moz-transition: padding .25s; 
	-webkit-transition: padding .25s; 
	-o-transition: padding .25s;
	transition: padding .25s;
}

步骤9：HTML5中的`required`属性

现在是我们所有人都在等待的时候了：HTML5的表单处理工具。

将required属性添加到任何input / textarea元素将告诉浏览器在提交表单之前需要一个值。因此，如果未填写required字段，则无法提交表单。

因此，让我们继续将required属性添加到我们所有的表单元素中（因为我们希望它们都被填写）。

<input type="text" name="name" required />
<input type="text" name="email" required />
<input type="text" name="website" required />
<textarea name="message" cols="40" rows="6" required ></textarea>

步骤10：样式化`required`字段

从视觉上看，您可能会注意到，通过添加required属性没有任何React。我们将使用CSS设置必填字段的样式。对于此示例，我们将在每个必填字段中添加一个红色星号作为背景图像。为此，我们将要首先在输入的右侧添加一些背景图像填充（如果字段条目为长字符串，这将防止文本重叠）：

.contact_form input, .contact_form textarea {
	padding-right:30px;
}

现在，我们将使用CSS伪选择器:required来定位具有必需属性的所有表单元素。我在Photoshop中制作了一个简单的16x16像素红色星号图标，该图标将用作必填字段的可视指示符。

input:required, textarea:required {
	background: #fff url(images/red_asterisk.png) no-repeat 98% center;
}

提交后会发生什么？

现在，提交使用HTML5元素的表单时，不同的浏览器将执行不同的操作。提交表单后，大多数浏览器都会阻止提交表单，并向用户显示“提示”，标记必填且没有值的第一个字段。这些“气泡域”的视觉样式和支持非常广泛。希望这些行为将来会变得标准化。

您可以在quirksmode上看到当前浏览器对required属性的支持。

小建议：

您实际上可以使用以下方法在webkit中设置气泡消息的样式：

::-webkit-validation-bubble-message {
	padding: 1em;
}

步骤11：了解新HTML5 `type`属性和客户端验证

HTML5验证根据在表单字段中设置的type属性工作。多年来，HTML仅支持少数类型属性，例如type="text"但是对于HTML5，我们将在表单中使用十多种新的输入类型，包括email和url 。

通过将我们的输入type属性与新的required属性组合在一起，浏览器现在可以验证表单的数据客户端。如果用户的浏览器不支持新的type属性，例如type="email" ，它将简单地默认为type="text" 。这实际上是非常惊人的。本质上，您在地球上所有浏览器中都具有向后兼容性，万岁！

那么，如果浏览器确实支持新的type属性，该怎么办？对于桌面浏览器，没有视觉差异（除非由自定义CSS规则指定）。 type="text"字段看起来与type="email"字段相同。但是，对于移动浏览器，在用户界面方面有所不同。

示例：iPhone

Apple的iPhone检测到表单类型，并通过提供上下文感知的字符来动态更改屏幕键盘。例如，所有电子邮件地址都需要以下符号：“ @”和“。”。因此，当输入类型指定为电子邮件时，iPhone将提供这些字符。

步骤12：更改`type`属性

我们已经将表单字段设置为默认的type="text" 。但是现在我们想将电子邮件和网站字段上的type属性更改为它们对应HTML5类型。

<input type="email" name="email" placeholder="john_doe@example.com" required />
<input type="url" name="website" placeholder="http://johndoe.com" required/>

步骤13：HTML5验证

如前所述，HTML5验证基于您的type属性，默认情况下处于启用状态。不需要特定的标记即可激活表单验证。如果您希望将其关闭，则可以使用novalidate属性，如下所示：

<form novalidate>
	<-- do not validate this form -->
	<input type="text" />
</form>

名称栏位

让我们看一下第一个询问用户名称的字段。如前所述，我们已经添加了type="text"属性和required属性。这将通知Web浏览器该字段是必填字段，并且应将其验证为简单文本。因此，只要用户在该字段中至少输入一个字符，它就会生效。

现在，我们将创建自己CSS，以设置浏览器认为有效和无效的字段输入的样式。如果您还记得的话，我们在CSS中使用:required来为所有输入元素设置必需属性的样式。现在，我们可以通过在CSS规则中添加:valid或:invalid来设置有效或无效字段的样式。

首先，让我们设置无效字段的样式。对于此示例，我们只希望在焦点对准表单时将其样式设置为无效。我们将添加在Photoshop中创建的红色边框，红色阴影和红色图标，以指示无效字段。

.contact_form input:focus:invalid, .contact_form textarea:focus:invalid { /* when a field is considered invalid by the browser */
	background: #fff url(images/invalid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #d45252;
	border-color: #b03535
}

现在，让我们创建表明该字段有效的规则。我们将添加在Photoshop中制作的绿色边框，绿色阴影和贪婪的选中标记图标。这将应用于所有有效字段，无论它们是否处于焦点。

.contact_form input:required:valid, .contact_form textarea:required:valid { /* when a field is considered valid by the browser */
	background: #fff url(images/valid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #5cd053;
	border-color: #28921f;
}

现在，当您专注于表单字段时，将显示红色的无效样式。一旦在字段中输入了单个字符，便会对其进行验证，并显示绿色CSS样式来表明这一事实。

电子邮件和URL字段

我们CSS样式和验证规则已经应用于电子邮件字段，因为我们之前设置了type和required属性。

步骤14：介绍HTML5 `pattern`属性

以type="email"属性为例，似乎大多数浏览器都将该字段验证为* @ *（任何字符+“ @”符号+任何字符）。这显然不是很有限，但确实可以防止用户输入完全错误的空格或值。

在type="url"属性的示例中，似乎大多数浏览器的最低要求是任何字符后跟冒号。因此，如果您输入“ h：”，则该字段将生效。这不是非常有用，但是可以防止用户输入不相关的信息，例如电子邮件或家庭住址。现在，您可以在服务器端验证中处理更具体的输入值。但是，我们将讨论如何在HTML5中做到这一点。

`pattern`属性

pattern属性接受javascript正则表达式。使用此表达式（而不是浏览器默认值）来验证字段的值。所以我们HTML现在看起来像这样：

<input type="url" name="website" placeholder="http://johndoe.com" required pattern="(http|https)://.+" />

现在，我们的字段将只接受以“ http：//”或“ https：//”开头的值以及一个附加字符。这些正则表达式模式一开始可能会令人困惑，但是一旦您花时间学习它们，您的表单就会向一个全新的世界开放。

步骤15：表单栏位提示（CSS）

现在，让我们设置表单提示的样式，告诉用户输入信息时应使用的格式。

.form_hint {
	background: #d45252;
	border-radius: 3px 3px 3px 3px;
	color: white;
	margin-left:8px;
	padding: 1px 6px;
	z-index: 999; /* hints stay above all other elements */
	position: absolute; /* allows proper formatting if hint is two lines */
	display: none;
}

我们设置display:none是因为我们仅在用户将注意力集中在输入字段时才显示提示。我们还将工具提示设置为默认为红色无效颜色，因为在输入正确信息之前，它们始终被视为无效。

使用`::before`选择器

现在，我们想在提示框中添加一个三角形，以帮助引导和引导眼睛。这可以使用图像来完成，但是在我们的例子中，我们将使用纯CSS来完成。

因为它纯粹是表示性元素，对页面的功能并不重要，所以我们将添加一个小三角形，该三角形使用::before伪选择器向左指向。我们可以通过使用unicode几何形状之一来做到这一点。

通常，我们将使用HTML Unicode格式在HTML中显示这些内容（如上图所示）。但是，由于将使用::before CSS选择器，因此在使用content:""规则时，必须使用三角形对应的转义unicode。然后，我们仅使用定位将其放置到所需位置。

.form_hint::before {
	content: "\25C0"; /* left point triangle in escaped unicode */
	color:#d45252;
	position: absolute;
	top:1px;
	left:-6px;
}

使用`+`相邻选择器

最后，我们将使用CSS相邻选择器来显示和隐藏表单字段提示。相邻的选择器（x + y）选择紧接在前一个元素之后的元素。由于我们的字段提示紧接在HTML中的输入字段之后，因此我们可以使用此选择器显示/隐藏工具提示。

.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;} /* change form hint color when valid */
.contact_form input:required:valid + .form_hint::before {color:#28921f;} /* change form hint arrow color when valid */

从CSS中可以看到，当字段有效或无效时，我们还设置了表单提示以更改颜色以及输入边框。

第16步：坐下来欣赏美丽HTML5表单

来看看您的最终产品！

结论

如您所见，新HTML5表单功能非常简洁！一切都向后兼容，因此将这些新功能整合到您的网站中不会破坏任何内容。

HTML5验证在帮助用户正确填写其在线表单方面正接近取代客户端验证。但是，HTML5验证仍然不能代替服务器端验证。目前，在处理用户提交的信息时最好同时使用这两种方法。谢谢阅读！

如果您需要专业的现成解决方案，请查看下一个项目的HTML5模板或CSS主题。

翻译自: https://webdesign.tutsplus.com/tutorials/bring-your-forms-up-to-date-with-css3-and-html5-validation--webdesign-4738