黑马前端——days22_API

最新推荐文章于 2024-08-20 18:04:12 发布

胆怯与勇敢

最新推荐文章于 2024-08-20 18:04:12 发布

阅读量265

点赞数 8

分类专栏：黑马前端文章标签：前端

本文链接：https://blog.csdn.net/qq_52652401/article/details/141300915

版权

黑马前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

页面框架文件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <input type="text">
    <span></span>
    <script src="index.js"></script>
</body>

</html>

格式文件

span {
  display: inline-block;
  width: 250px;
  height: 30px;
  vertical-align: middle;
  line-height: 30px;
  padding-left: 15px;
}

.error {
  color: red;
  background: url(./images/error.png) no-repeat left center;
}

.right {
  color: green;
  background: url(./images/right.png) no-repeat left center;
}

error right

事件文件

const reg = /^[a-zA-Z0-9-_]{6,16}$/
const input = document.querySelector('input')
const span = input.nextElementSibling
input.addEventListener('blur', function () {
  if (reg.test(this.value)) {
    span.innerHTML = '输入正确'
    span.className = 'right'
  } else {
    span.innerHTML = '请输入6~16位的英文数字下划线'
    span.className = 'error'
  }
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

胆怯与勇敢

关注关注

8
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
黑马前端——days22_API

页面框架文件<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
复制链接

扫一扫