纯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;
}

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

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:纯css实现输入框placeholder动效及输入校验 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • css利用一张背景图制作导航菜单实现思路及代码

    CSS利用一张背景图制作导航菜单,可以通过以下步骤实现: 1. 准备一张导航菜单背景图片 首先,我们需要准备一张合适的导航菜单背景图片。这个图片应该包含导航菜单的所有样式,比如菜单项之间的间距、选中菜单项的样式等。可以使用Adobe Photoshop或者其他图形编辑软件来制作这个背景图片。 2. 将背景图片设置为导航菜单的背景 利用CSS,我们可以将背景图…

    css 2023年6月9日
    00
  • jQuery动画效果实现图片无缝连续滚动

    下面是详细的讲解“jQuery动画效果实现图片无缝连续滚动”的完整攻略。 1. 项目基础 我们将会使用jQuery来实现图片滚动效果。因此,为了确保我们的代码可以正常工作,我们需要确保以下内容已经准备就绪: 1.1. 引入 jQuery 首先,需要在 HTML 文件中引入 jQuery。保证你的项目中包含以下代码: <script src="…

    css 2023年6月10日
    00
  • 浅谈移动端适配大法

    浅谈移动端适配大法 移动端的屏幕大小多种多样,如何让页面在不同尺寸的移动设备上都有良好的显示效果,是前端开发者需要考虑的问题之一。本文将介绍几种常用的移动端适配方案,希望对读者的移动端开发工作有所帮助。 方案一:Viewport单位 Viewport是指浏览器显示内容的区域,通常设备的物理分辨率会远高于Viewport的分辨率。Viewport单位就是相对于…

    css 2023年6月10日
    00
  • JS中获取 DOM 元素的绝对位置实例详解

    获取 DOM 元素的绝对位置是前端开发中常用的操作之一。本文将提供 JS 获取 DOM 元素绝对位置的详细攻略,包括两个实例。 一、获取 DOM 元素的绝对位置 在JS中,获取DOM元素的绝对位置需要以下步骤: 获取元素相对于视口的位置 使用getBoundingClientRect()方法可以获取元素相对于视口的位置信息,并返回坐标的四个属性值(left、…

    css 2023年6月10日
    00
  • HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影

    这个话题比较复杂,需要细致的讲解,下面为您详细讲解“HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影”的完整攻略。 一、瀑布流布局 瀑布流布局的关键在于如何优化瀑布流项的位置,使得页面整体布局效果更佳。以下是基于html5和CSS实现的瀑布流布局的示例代码,我们可以通过修改CSS代码,改变展示的效果。 <!DOCTYPE html> &l…

    css 2023年6月11日
    00
  • JS关键字变色实现思路及代码

    下面就为大家详细讲解JavaScript关键字变色实现的思路及代码,包括基本思路和具体实现方法。 思路 在网页中,我们需要对JavaScript代码中的关键字进行变色,以提高可读性。在实现上,我们可以通过以下步骤来实现: 检索出所有的JS代码块 对每个代码块中的关键字进行标记,添加样式 关键字的样式可以自定义,比如高亮、变色等 实现代码块中包含注释的情况 代…

    css 2023年6月10日
    00
  • 尽量不要使用CSS Expression的原因

    以下是详细讲解“尽量不要使用CSS Expression的原因”的完整攻略。 什么是CSS Expression CSS Expression是一种一个语法结构,用于JavaScript表达式的计算结果,可以被用于样式属性中,例如: width: expression(document.body.clientWidth>800 ? "800p…

    css 2023年6月10日
    00
  • 关于table的width:100%和margin导致溢出

    关于table的width:100%和margin导致溢出的问题通常是因为没有正确理解table默认的box-sizing属性造成的,下面是完整攻略。 了解table的默认box-sizing属性 table 是一个特殊的 HTML 标签,它默认的 box-sizing 属性是 border-box,而非一般的 content-box,这意味着 table …

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部