js编码，编写一个用户注册表，实现当密码输入错误时，提示报错；密码时输入正确时，提示密码正确。

最新推荐文章于 2023-01-04 20:25:24 发布

奶酪酥

最新推荐文章于 2023-01-04 20:25:24 发布

阅读量3.1k

点赞数 7

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

本文链接：https://blog.csdn.net/qq_41263192/article/details/120472661

版权

JavaScript小实验专栏收录该内容

1 篇文章 0 订阅

订阅专栏

2021-9-26更新在下方

实验提示图：

提示图

实验要求

写一个用户注册的表单
检查用户输入的密码和确认密码是否一致，如果一致，则显示“密码一致”；否则，显示“密码不一致”。

实验提供思路

何时出发检测？
捕获用户输入的内容
比较用户输入的内容
输出比较后的信息

<!-- 表单检查.html -->
<!-- 
写一个用户注册的表单
检查用户输入的密码和确认密码是否一致，如果一致，则绿色显示“密码一致”；否则，显示“密码不一致”。 
思路：
1. 何时出发检测？
2. 捕获用户输入的内容
3. 比较用户输入的内容
4. 输出比较后的信息
-->

<html>
    <head>
        <title>
            表单检查
        </title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>用户注册</h1>
        <form action="" method="GET">
            用户名：<input type="text">
                <br>
            密码：<input type="password" name="pass1" id="pass1" onblur="clicktest()">
                <br>
            确认密码：<input type="password" name="pass2" id="pass2" onblur="clicktest()">
                <br>
                <span id="msg"></span>
                <br>
            <input type="button"  name = "sub" value="提交按钮">
        </form> 
    </body>
    <script>
        function clicktest(){
            var pass1 = document.getElementsByName("pass1")[0];
            var pass2 = document.getElementsByName("pass2")[0];
            var msg = document.getElementById("msg");
            var sub = document.getElementsByName("sub")[0];
            if (pass1.value == pass2.value) {
            msg.innerHTML = "密码一致";
            msg.style.color = 'green';
            sub.disabled = "";
            } else {
                msg.innerHTML = "密码不一致";
                msg.style.color = 'red';
                sub.disabled = 'true';
            }
        }
    </script>
</html>

成果

密码正确密码错误

记录一下我初学js刚刚想出来的这一道题，虽然是通过了解老师的代码研究出来的比较简单的一道题，但是原理已经大概明白，纪念一下这个时刻=v=

更新：使用onblur属性和disable属性对此功能进行更新

onblur：onblur 事件会在对象失去焦点时发生。（官方解释）
选中当前的文本框，当离开文本框时就会触发onblur事件（我的理解）

密码：<input type="password" name="pass1" id="pass1" onblur="clicktest()">
<br>
确认密码：<input type="password" name="pass2" id="pass2" onblur="clicktest()">

disable:sub对象是对提交按钮进行的定义，当密码错误时，按钮会是灰的，无法点击选中；只有当密码正确时，按钮才会正常工作。

if(pass1.value != pass2.value){
             meg.innerHTML = "密码错误，请重新输入密码";
             meg.style.color = "red";
             sub.disable = "true";
         }
else{
             meg.innerHTML = "密码正确";
             meg.style.color = "blue";
             sub.disable = "";
             }

奶酪酥

关注

7
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
js编码，编写一个用户注册表，实现当密码输入错误时，提示报错；密码时输入正确时，提示密码正确。

js编码，编写一个用户注册表，实现当密码输入错误时，提示报错；密码时输入正确时，提示密码正确。实验提示图：实验要求写一个用户注册的表单检查用户输入的密码和确认密码是否一致，如果一致，则显示“密码一致”；否则，显示“密码不一致”。实验提供思路何时出发检测？捕获用户输入的内容比较用户输入的内容输出比较后的信息<html> <head> <title> 表单检查 </title&
复制链接

扫一扫