使用 JS 内置对象相关方法完成用户注册验证

最新推荐文章于 2022-06-21 19:58:37 发布

肖奇鹏

最新推荐文章于 2022-06-21 19:58:37 发布

阅读量751

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/m0_50931605/article/details/118207861

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

验证规则如下：

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

（1）用户名及用户密码、重复密码必填，不能为空
（2）用户密码长度不能小于六位
（3）用户密码及重复密码必须相同
满足如上验证条件，提示用户“注册成功！

代码如下（示例）：


    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        ul {
            width: 300px;
            height: 150px;
            border: 1px solid #ccc;
            background-color: pink;
            margin: 0 auto;
        }
        
        ul>li {
            margin-left: 20px;
            margin-top: 10px;
        }
        
        button {
            margin-left: 50%;
            transform: translateX(-50%);
        }
    </style>




<body>
    <ul>
        <li><span>用&ensp;户&ensp;名:</span> <input type="text"></li>
        <li><span>密&ensp;&ensp;&ensp;&ensp;码:</span> <input type="password" placeholder="请输入密码"></li>
        <li><span>重复密码:</span> <input type="password" placeholder="请输入重复密码"></li>

    </ul>
    <button>注册</button>








    <script>
        var btn = document.getElementsByTagName("button")[0];
        var int1 = document.getElementsByTagName("input")[0];
        var int2 = document.getElementsByTagName("input")[1];
        var int3 = document.getElementsByTagName("input")[2];


        btn.onclick = function() {
            if (int1.value == 0) {
                alert("用户名不能为空，请重新填写！");
                return;
            } else if (int2.value == 0 || int3.length == 0) {
                alert("密码或重复密码不能为空，请重新填写！");
                return;
            } else if (int2.value.length < 6) {
                alert("请输入正确的密码格式")
            } else if (int2.value != int3.value) {
                alert("两次输入的密码不相同！");
                return;
            } else {
                alert("注册成功！")
            }
        }
    </script>
</body>