下面我将为您介绍“纯css实现输入框placeholder动效及输入校验”的完整攻略。
1.动态placeholder效果
我们可以通过伪类::placeholder
实现输入框内的placeholder动态效果。下面是一个例子:
<input type="text" placeholder="请输入用户名" class="username">
input::placeholder {
color: #999;
transition: all 0.3s;
}
input:focus::placeholder {
color: #ccc;
transform: translateY(-25px);
}
这里给输入框的placeholder设置了一个灰色的颜色,并且设置了一个0.3秒的过渡效果。当输入框被聚焦时,我们将placeholder的颜色设置为浅灰色,并通过transform
将其向上平移了25像素。
2.输入校验
2.1 基本的输入校验
通过HTML5新增的表单元素,我们可以实现一些简单的输入校验功能。例如,我们可以通过required
属性设置某个输入框必填:
<input type="text" placeholder="请输入用户名" class="username" required>
还可以使用pattern
属性设置一段正则表达式进行输入校验,例如,我们可以设置密码必须包含至少一个数字和字母:
<input type="password" placeholder="请输入密码" class="password" pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$">
这里使用了正则表达式^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$
进行输入校验,该正则表达式的含义是:以字母或数字开头,至少包含一个数字和字母,总长度为8个字符以上。
2.2 自定义输入校验
如果基本的输入校验功能无法满足我们的需求,我们可以自定义输入校验。例如,我们可以为输入框设置一个regExp属性,并在js代码中添加校验逻辑:
<input type="text" placeholder="请输入邮箱地址" class="email" regExp="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
// 获取所有带有regExp属性的输入框
const inputElements = document.querySelectorAll('[regExp]');
// 给所有带有regExp属性的输入框添加校验逻辑
inputElements.forEach((elem) => {
elem.addEventListener('blur', () => {
const regExp = new RegExp(elem.getAttribute('regExp'));
if (!regExp.test(elem.value)) {
elem.classList.add('invalid');
} else {
elem.classList.remove('invalid');
}
});
});
这里我们对所有带有regExp
属性的输入框添加了校验逻辑,在失焦事件中获取regExp
属性对应的正则表达式,并与输入框中的值进行校验。如果校验不通过,则添加一个invalid
类,可以在CSS中自定义样式。
input.invalid {
border-color: red;
}
通过上面的代码,我们可以实现输入框的自定义校验。当输入框的内容不符合指定的正则表达式时,输入框边框会变成红色。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:纯css实现输入框placeholder动效及输入校验 - Python技术站