HTML5中如何通过CSS伪类设置表单的样式来反应表单是否通过了验证？
若以下回答无法解决问题，邀请你更新回答
1个回答
展开全部
通过CSS伪类设置表单的验证规则主要的思路如下：
1、 首先我们要表单设置验证规则
2、 设置验证消息
3、 用CSS伪类来控制验证消息，或者控制input元素的样式来提示用户进行输入。
下面我们以这个思路来写一个小小的示例来以供参考：下面的这段代码我们先看HTML代码中的相关注释，然后再看Style元素中通过CSS伪类来进行表单验证的代码注释
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Forms: Validation Pseudo Classes</title>
<style>
//这里的input：valid就是一个CSS伪类选择器，它表示选择所有输入值都符合验证规则的input元素。valid实际上就是一个伪类。然后设置这些input元素相邻的class值为invalid的元素为隐藏状态
input:valid + .invalid /* 相邻的选择器 */ {
visibility: hidden;
}
//通过CSS伪类选择器选择所有输入值不符合验证规则的input元素，然后设置这些input元素相邻的class值为invalid的元素为隐藏状态
input:invalid + .invalid/* 相邻的选择器 */ {
visibility: visible;
}
//这里通过伪类选择器设置所有具有required属性的input元素的边框样式，来提醒用户该样式的input元素为必须输入的元素
input:required {
border: 2px solid #900;
}
//设置所有符合验证规则的input元素的边框样式
input:valid {
border: 2px solid #ccc;
}
.invalid {
margin-top:0px;
margin-bottom:4px;
font-size:0.8em;
color: #666;
}
</style>
</head>
<body>
<article>
<h1>Forms<span> - 伪类验证</span></h1>
</article>
<div id="result-stub" class="well hidden">
<form id="changeEmailForm">
<fieldset>
<h4>更改Email 地址</h4>
//在用户名input元素这里通过正则表达式为设置了输入内容只能是英文字母，且最低长度为5，最长字符为30个字符。
<input type="text"
id="username" name="username"
pattern="[a-zA-Z ]{5,}"
placeholder="用户名"
maxlength="30" required />
//设置了一个用div标签包裹的提示语句，并设置了一个class值。
<div>
用户名必须为一连串的字母组成
</div>
//在这里设置了input元素的验证规则是该input元素必须有内容输入，且输入的内容必须满足电子邮件的格式
<input type="email"
id="email" name="email"
placeholder="Email" required />
//这里有一个div标签包裹着提示性文字，且class值与上一个用户名的提示语句的值是一样的。
<div>
邮箱地址除了@符号之外不允许包含任何特殊的字符。
</div>
<button type="submit"
id="submit" name="submit">更改</button>
</fieldset>
</form>
</div>
</body>
</html>
推荐你去教程网站秒秒学上过一遍相关知识，希望对你有帮助。
1、 首先我们要表单设置验证规则
2、 设置验证消息
3、 用CSS伪类来控制验证消息，或者控制input元素的样式来提示用户进行输入。
下面我们以这个思路来写一个小小的示例来以供参考：下面的这段代码我们先看HTML代码中的相关注释，然后再看Style元素中通过CSS伪类来进行表单验证的代码注释
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Forms: Validation Pseudo Classes</title>
<style>
//这里的input：valid就是一个CSS伪类选择器，它表示选择所有输入值都符合验证规则的input元素。valid实际上就是一个伪类。然后设置这些input元素相邻的class值为invalid的元素为隐藏状态
input:valid + .invalid /* 相邻的选择器 */ {
visibility: hidden;
}
//通过CSS伪类选择器选择所有输入值不符合验证规则的input元素，然后设置这些input元素相邻的class值为invalid的元素为隐藏状态
input:invalid + .invalid/* 相邻的选择器 */ {
visibility: visible;
}
//这里通过伪类选择器设置所有具有required属性的input元素的边框样式，来提醒用户该样式的input元素为必须输入的元素
input:required {
border: 2px solid #900;
}
//设置所有符合验证规则的input元素的边框样式
input:valid {
border: 2px solid #ccc;
}
.invalid {
margin-top:0px;
margin-bottom:4px;
font-size:0.8em;
color: #666;
}
</style>
</head>
<body>
<article>
<h1>Forms<span> - 伪类验证</span></h1>
</article>
<div id="result-stub" class="well hidden">
<form id="changeEmailForm">
<fieldset>
<h4>更改Email 地址</h4>
//在用户名input元素这里通过正则表达式为设置了输入内容只能是英文字母，且最低长度为5，最长字符为30个字符。
<input type="text"
id="username" name="username"
pattern="[a-zA-Z ]{5,}"
placeholder="用户名"
maxlength="30" required />
//设置了一个用div标签包裹的提示语句，并设置了一个class值。
<div>
用户名必须为一连串的字母组成
</div>
//在这里设置了input元素的验证规则是该input元素必须有内容输入，且输入的内容必须满足电子邮件的格式
<input type="email"
id="email" name="email"
placeholder="Email" required />
//这里有一个div标签包裹着提示性文字，且class值与上一个用户名的提示语句的值是一样的。
<div>
邮箱地址除了@符号之外不允许包含任何特殊的字符。
</div>
<button type="submit"
id="submit" name="submit">更改</button>
</fieldset>
</form>
</div>
</body>
</html>
推荐你去教程网站秒秒学上过一遍相关知识，希望对你有帮助。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
