纯css实现输入框placeholder动效及输入校验

下面我将为您介绍“纯css实现输入框placeholder动效及输入校验”的完整攻略。

下面我将为您介绍“纯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;
}

通过上面的代码，我们可以实现输入框的自定义校验。当输入框的内容不符合指定的正则表达式时，输入框边框会变成红色。