jq密码验证正确性

最新推荐文章于 2023-05-23 10:57:07 发布

lily2016n

最新推荐文章于 2023-05-23 10:57:07 发布

阅读量1.1k

点赞数 1

分类专栏：前端学习 js 文章标签： jquery 验证码识别源代码

本文链接：https://blog.csdn.net/lily2016n/article/details/69500281

版权

js 同时被 3 个专栏收录

30 篇文章 1 订阅

订阅专栏

前端

12 篇文章 0 订阅

订阅专栏

学习

7 篇文章 0 订阅

订阅专栏

验证密码的正确性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .show {
                padding: 20px;
                display: none;
            }

            em {
                font-style: normal;
                color: #ff6600
            }
            ul li{
                width: 50px;
                height: 50px;
                border:1px solid red; 
                float: left;
                list-style: none;
            }
            ul li{
                border-right: none;
               font-size: 50px;
               line-height: 10px;
               text-align: center;
            }
             ul li:nth-child(6){
                border-right:1px solid red;
             }
             .clearfix:after{
                height: 0;
                content: '';
                display: block;
                height: 0;
                font-size: 0;
                visibility: hidden;
                clear: both;
             }
             /*input{
                height: 1;
                opacity: 0;
                width: 1;
                border: none;
             }*/
             body{
                height: 3000px;
             }
    </style>
</head>
<body>
<label for="inp">
    <ul class="clearfix">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</label>
<input type="tel" name="" id="inp" maxlength="6">
<div class="show">呵呵<span></span></div>  
<div class="back" style="position:fixed; bottom: 0;">回顶部</div>  
</body>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript">
    $('#inp').on('input',function(){
        var num = 6;
        var vr = $('#inp').val();
        var list = $('li');
        /*$("#inp").focus();*/
        $('span').text($('#inp').val());
        for (var i = 0; i<num; i++) {
            if (vr[i]) {
                $(list[i]).text('.')
            }else{
                $(list[i]).text('')
            }
        }
        if ($('span').text().length==6){
            if ($('span').text()== '123456') {
                alert('密码正确')
            }else{
                alert("密码错误")
            }
    }
    })
    $(window).scroll(function(){
      $('.back').click(function(){
        document.body.scrollTop = 0
      })
    })
</script>
</html>

效果图如图所示

lily2016n

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq密码验证正确性

验证密码的正确性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .show { padding: 20px; display
复制链接

扫一扫

专栏目录