js 实现两个input密码确认框

痛定思痛。 2023-07-22 15:29 109阅读 0赞

js 实现 两个input密码确认框

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>后盾人</title>
    </head>
    
    <body>
        <input type="text" name="password" />
        <input type="text" name="confirm_password" />
        <br />
        <span name="msg"></span>
        <script>
            function query(name) { 
                return document.querySelector(`[name='${ name}']`)
            };
            console.log(query('password'));
    
            let inputs = document.querySelectorAll("[name='password'],[name='confirm_password']");
            [...inputs].map(item => { 
                item.addEventListener("keyup", function() { 
                    let msg = '';
                    if (query('password').value !== query("confirm_password").value || query('password').value.length < 5) { 
                        msg = '两次密码不一致 或密码长度小于5位'
                    }
                    query('msg').innerHTML = msg;
                });
            });
    
        </script>
    </body>
    
    </html>

--------------------

--------------------

> 两次密码输入的不一致：  
> ![在这里插入图片描述][20200406142114575.png]

> 两次密码输入的一致 ：  
> ![在这里插入图片描述][20200406142016965.png]

> 两次密码一致，但小于5位 ：  
> ![在这里插入图片描述][20200406142231289.png]

[20200406142114575.png]: /images/20230528/415ed269df8e4b1181c85289fa711e8b.png
[20200406142016965.png]: /images/20230528/4f2af6a7d91d46628ff390a5a5a1ebbf.png
[20200406142231289.png]: /images/20230528/8d6d3aee63c24b73ad126c4a03181925.png

发表评论取消回复

表情：

评论列表（有 0 条评论，109人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 实现两个input密码确认框

js 实现两个input密码确认框 <!DOCTYPE html> <html lang="en"> <head> <me

痛定思痛。/ 2023年07月22日 15:29/ 0 赞/ 110 阅读

相关 js input输入框校验

只能输入英文 <input type="text" οnkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> 只能输入英文

比眉伴天荒/ 2022年10月01日 07:55/ 0 赞/ 222 阅读

相关判断两个input输入框的值(int)

<input type="text" class="" value="" placeholder="" id="input1" name=""> <input

本是古典何须时尚/ 2022年05月24日 22:13/ 0 赞/ 186 阅读

相关 java实现两个select框内容左右移动，js实例

![70][] js编码： $(document).ready(function ()\{ //双击将选中的option追加至select2中 $("\select

偏执的太偏执、/ 2022年05月24日 05:55/ 0 赞/ 174 阅读

相关清除Input密码框的缓存方法

<input type="text" name="name" id="name" autocomplete="off" > 只需要在input密码框后面加上 auto

╰+哭是因爲堅強的太久メ/ 2022年02月15日 07:53/ 0 赞/ 343 阅读

相关 JS警告框和确认框

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BOM

太过爱你忘了你带给我的痛/ 2021年12月12日 16:25/ 0 赞/ 305 阅读

相关拥有确认和取消两个按钮的提示框

定义和用法 confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。语法 confirm(message) <table sty

缺乏、安全感/ 2021年09月26日 07:18/ 0 赞/ 329 阅读

相关 JS确认框

本文主要介绍js确认框的几种种使用方法一. function del() { var msg = "您真的确定要删除吗？\n\n请确认！";

ゝ一世哀愁。/ 2021年09月26日 06:12/ 0 赞/ 339 阅读

相关阻止浏览器自动填充input密码框

1.最简单的方法,加一个属性autocomplete="new-password". 2.把input type=”password” 改成 input ty

深藏阁楼爱情的钟/ 2021年09月15日 13:24/ 0 赞/ 510 阅读

相关 HTML input password 密码框

HTML input password 密码框将 `<input>` 标签 type 属性值设置为 "password" 即可创建一个密码框。密码框是一种特殊文本框，...

小灰灰/ 2020年05月16日 18:30/ 0 赞/ 836 阅读