黑马前端——days22

页面框架文件

<!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'
  }
})