密码框验证信息

最新推荐文章于 2024-05-23 11:58:34 发布

菜鸟级码农小林

最新推荐文章于 2024-05-23 11:58:34 发布

阅读量384

点赞数

分类专栏： JavaScript html 文章标签： javascript html

本文链接：https://blog.csdn.net/m0_59735348/article/details/124478290

版权

本文介绍如何使用HTML和JavaScript来创建一个带有验证功能的密码输入框。内容包括密码强度检查、确认密码匹配等常见验证规则的实现，旨在提高用户输入的安全性和准确性。

摘要由CSDN通过智能技术生成

<html>
    <input type="password" class="pwd" />
    <p class="message">请输入6~16位的密码</p>
</html>
<script>
      // 获取元素
      var a = document.querySelector(".pwd");
      var b = document.querySelector(".message");
      // 失去焦点事件
      a.onblur = function () {
        //判断密码长度小于6或者大于16提示错误
        if (this.value.length < 6 || this.value.length > 16) { 
          b.className = "message wrong"; //更换p标签的样式，这样写是为了保留原本的样式不被替换
          b.innerHTML = "❌输入的位数不对哦，请输入6~16位的密码"; //更换p标签的内容
        } else {
          b.className = "message right";
          b.innerHTML = "√ 输入正确";
        }
      };
</script>
<style>
    .message {
      display: inline-block;
    }
    .wrong {
      color: red;
    }
    .right {
      color: green;
    }
</style>

效果图：

最低0.47元/天解锁文章

菜鸟级码农小林

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
密码框验证信息

<html> <input type="password" class="pwd" /> <p class="message">请输入6~16位的密码</p></html><script> // 获取元素 var a = document.querySelector(".pwd"); var b = document.querySelector(".message"); .
复制链接

扫一扫

专栏目录