基于JavaScript实现密码框验证信息

2024-10-02 17:06:25

本文实例为大家分享了JavaScript实现密码框验证信息的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }

        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(./img/1.png) no-repeat left center;
            padding-left: 10px;
        }

        .wrong {
            color: red;
            background-image: url(img/2.png);
        }

        .right {
            color: green;
            background-image: url(img/3.png);
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6-16位密码</p>
    </div>
    <script>
        //获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //注册事件
        ipt.onblur = function() {
            //根据表单的值的长度
            if (this.value.length < 6 || this.value.length > 16) {
                message.className = 'message wrong';
                message.innerHTML = '你输入的位数不对';
            } else {
                message.className = 'message right';
                message.innerHTML = '输入正确';
            }
        }
    </script>
</body>

</html>

运行结果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JS实现密码框的显示密码和隐藏密码功能示例

本文实例讲述了JS实现密码框的显示密码和隐藏密码功能.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <form method="POST" action="
JavaScript实现输入框(密码框)出现提示语

有时候我们需要在登陆表单有一些提示语言,比如"请输入用户名"和"请输入密码"等语言,至于用户名好说,但是在密码框中出现"请输入密码"这样的语言就有点麻烦了,因为在密码框输入的内容不会以明码显示.如果动态的控制type属性的话就有兼容性问题,如果input已经存在于页面中的话,在IE8和IE8以下浏览器中,type属性是只读的.所以就得想其他办法,代码如下: <!DOCTYPE html> <html> <head&g
JS实现密码框效果

在输入密码时,将密码的长度设置为6-16,且在密码长度出现小于6或是大于16时,会出现提示,效果如下图 1. 此事件为失去焦点事件,当鼠标离开密码框且点击旁边就会触发事件 2. 输入密码会出现提示,事件发生与密码的长度有关 3. 根据长度再来判断该提示的消息与效果. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me
JS实现表单中点击小眼睛显示隐藏密码框中的密码

领导交个一个任务,要求在表单中点击小眼睛显示隐藏密码框中的密码!在一些网站中经常会用到这样的功能,今天小编就给大家分享我的实现思路及代码准备: 1.两张png图片,一张睁眼,一张闭眼,可以到阿里巴巴矢量图库寻找(免费下载) 最终效果图 css样式部分,样式可根据自己喜好设置,没有过硬要求 <style> div:first-child { width: 300px; height: 50px; background-color: red; color: white; margin: 20px
JavaScript如何实现在文本框(密码框)输入提示语

有时候我们需要在登陆表单有一些提示语言,比如"请输入用户名"和"请输入密码"等语言,至于用户名好说,但是在密码框中出现"请输入密码"这样的语言就有点麻烦了,因为在密码框输入的内容不会以明码显示.如果动态的控制type属性的话就有兼容性问题,如果input已经存在于页面中的话,在IE8和IE8以下浏览器中,type属性是只读的.所以就得想其他办法,代码如下: <!DOCTYPE html> <html> <head&g
js实现input密码框显示/隐藏功能

JavaScript实现input密码框显示/隐藏的功能,供大家参考,具体内容如下实现代码: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .password{ position: relative; width: 280px; height: 60px; } .password,.n-txtCss{ display:
javascript 密码框防止用户粘贴和复制的实现代码

<input id="password" type="password" onpaste="return false" onselectstart="return false" /> onpaste="return false":防止粘贴 onselectstart="return false":防止自制
js正则实现的密码框简单制作,还可以替换成自己想用得符号

密码框简单制作,还可以替换成自己想用得符号. <style type="text/css"> #c { position: relative; } #a { position: absolute; left: 0; top: 0; font-size: 12px; font-family: 宋体; } #b { position: absolute; left: 0; top: 0; font-size: 12px; font-family: 宋体; -moz-opacit
js实现input密码框提示信息的方法(附html5实现方法)

本文实例讲述了js实现input密码框提示信息的方法.分享给大家供大家参考,具体如下: 今天我们主管说要在密码框加入个"请输入密码"的提示信息,第一次的时候本来想着用修改input type 属性的方法呢,结果有某些特别的浏览器不支持,IE的input的type属性是只读的,不能动态设置.所以换其它的方法,实例如下: <input type="text" onfocus="changeTip(this);" id="passTe
基于JS实现密码框(password)中显示文字提示功能代码

其实实际上实现中并不能让password中显示文字提示,但是我们在工作中有这样的需求,当没输入东西的时候,框内有提示输入密码,但是当输入东西的时候又显示的是*号,那么是如何实现的呢?其实原理很简单,就是放两个文本框,样式以及定位都是一样的.先将type为password的隐藏,只显示type为text的伪密码框,value设置提示内容例如请输入密码.然后当input触发的时候,type为text的input隐藏,让type为password的input显示出来.然后当检测password的val

基于JavaScript实现密码框验证信息

相关推荐

随机推荐