DOM实现简单手机号验证

最新推荐文章于 2023-05-24 17:39:43 发布

HeWar_

最新推荐文章于 2023-05-24 17:39:43 发布

阅读量142

点赞数 1

分类专栏： JS DOM HTML 文章标签： html dom

本文链接：https://blog.csdn.net/HeWar_/article/details/120750125

版权

JS 同时被 3 个专栏收录

30 篇文章 1 订阅

订阅专栏

HTML

6 篇文章 0 订阅

订阅专栏

DOM

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <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>
  </head>
  <body>
    <div>
      <span>手机号</span>
      <input type="text" />
    </div>
    <div id="msg" style="padding-left: 50px"></div>

    <script>
      // 当输入框的光标消失(失去焦点--blur)
      let input_phone = document.getElementsByTagName("input")[0]

      // 失去焦点事件
      input_phone.onblur = function () {
        console.log("输入框失去焦点!")
        // 获取输入框的值, 检验是否是手机号格式
        let reg_phone = /^1[3-9]\d{9}$/

        if (reg_phone.test(this.value) == true) {
          // 绿色文字: 手机号格式正确
          msg.innerHTML = `<span style="color:green;">手机号格式正确</span>`
          this.style.border = "1px solid green"
        } else {
          this.style.border = "1px solid red"
          // 红色文字: 手机号格式错误
          msg.innerHTML = `<span style="color:red;">手机号格式错误</span>`
        }
      }
    </script>
  </body>
</html>

HeWar_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
DOM实现简单手机号验证

<!DOCTYPE html><html lang="en"> <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" /> &l...
复制链接

扫一扫