通过H5新标签度量器和对DOM元素进行操作来实现密码强度的显示

最新推荐文章于 2023-03-27 23:08:45 发布

Dreamer_Ji

最新推荐文章于 2023-03-27 23:08:45 发布

阅读量188

点赞数

本文链接：https://blog.csdn.net/Dreamer_Ji/article/details/107374171

版权

主要代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <label for="password">密码：</label>
        <input type="password" name="password" id="password" v-model="pwd" >
        <input type="button"   value="提交">
        <meter max="10" min="0" high="8" low="4" id="myMeter"></meter>
        <label id="qd"></label>
    </div>
    <script>
    //oninput是H5新的事件进行文本框内容的监听
       document.getElementById("password").oninput=function(){
       //注意切记要在这里面进行变量的赋值，不要傻傻的在外面进行赋值，因为是监听文本框中的内容进行改变的。
        var length=document.getElementById("password").value.length;
            document.getElementById("myMeter").value=length;
         
         if(length<4||length==4){
         //修改标签里的值进行显示
            document.getElementById("qd").innerText="弱";
         }  else if(length>4&&length<8){
            document.getElementById("qd").innerText="一般";
          }else{
            document.getElementById("qd").innerText="强";
          }
       }
    </script>
</body>
</html>

运行结果：

弱密码
在这里插入图片描述
一般的密码

强密码

Dreamer_Ji

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过H5新标签度量器和对DOM元素进行操作来实现密码强度的显示

主要代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="lib/vue-2.4.0.js"&
复制链接

扫一扫

通过H5新标签度量器和对DOM元素进行操作来实现密码强度的显示

主要代码：

运行结果：

“相关推荐”对你有帮助么？