zoukankan html css js c++ java

完成登录与注册页面的前端

完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括：

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <link rel="stylesheet" href="../static/css/1024.css">
    <script src="../static/js/1024.js"></script>
</head>
<body>
<div class="box">
    <h2>登陆</h2>
    <div class="input_box">
        <input id="uname" type="text" placeholder="请输入用户名">
    </div>
    <div class="input_box">
        <input id="upass" type="password" placeholder="请输入密码">
    </div>
    <div id="error_box"><br></div>
    <div class="input_box">
        <button onclick="fnlogin()">登陆</button>

    </div>
</div>


</body>
</html>

登录页面js

function fnlogin() {
    var oUname = document.getElementById("uname")
    var oUpass = document.getElementById("upass")
    var oError = document.getElementById("error_box")
    oError.innerHTML = "<br>"
    if (oUname.value.length < 6||oUname.value.length > 20  ) {
        oError.innerHTML = "用户名必须在6-20之间";
        return;
    } else if ((oUname.value.charCodeAt(0) >= 48) && (oUname.value.charCodeAt(0) <= 57)) {
        oError.innerHTML = "首字母不能为数字";
        return;
    } else for (var i = 0; i < oUname.value.length; i++) {
        if ((oUname.value.charCodeAt(i) < 48) || (oUname.value.charCodeAt(i)> 57) && ((oUname.value.charCodeAt(i) < 97)) || oUname.value.charCodeAt(i) > 122) {
            oError.innerHTML = "只能填写数字或字母";
            return;
        }
    }
    // oUpass
    if (oUpass.value.length > 20 || oUpass.value.length < 6) {
        oError.innerHTML = "密码必须在6-20之间";
        return;
    }

    window.alert("登陆成功！")
}

注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="../static/css/1024.css">
    <script src="../static/js/1031.js"></script>
</head>
<body>
<div class="box">
    <h2>注册</h2>
    <div class="input_box">
        <input id="uname" type="text" placeholder="请输入昵称">
    </div>
    <div class="input_box">
        <input id="upass" type="password" placeholder="请输入密码">
    </div>
     <div class="input_box">
        <input id="upass1" type="password" placeholder="请再次输入密码">
    </div>
    <div id="error_box"><br></div>
    <div class="input_box">
        <button onclick="tnlogin()">注册</button>

    </div>
</div>

</body>
</html>

注册页面js

function tnlogin() {
    var oUname = document.getElementById("uname")
    var oError = document.getElementById("error_box")
    var oUpass = document.getElementById("upass")
    var oUpass1 = document.getElementById("upass1")

    oError.innerHTML = "<br>"
    if (oUname.value.length < 6 || oUname.value.length > 20) {
        oError.innerHTML = "用户名必须在6-20之间";
        return;
    } else if ((oUname.value.charCodeAt(0) >= 48) && (oUname.value.charCodeAt(0) <= 57)) {
        oError.innerHTML = "首字母不能为数字";
        return;
    } else for (var i = 0; i < oUname.value.length; i++) {
        if ((oUname.value.charCodeAt(i) < 48) || (oUname.value.charCodeAt(i) > 57) && ((oUname.value.charCodeAt(i) < 97)) || oUname.value.charCodeAt(i) > 122) {
            oError.innerHTML = "只能填写数字或字母";
            return;
        }
    }
    // oUpass
    if (oUpass.value.length > 20 || oUpass.value.length < 6) {
        oError.innerHTML = "密码必须在6-20之间";
        return;
    } else if (oUpass.value!= oUpass1.value) {
       oError.innerHTML = "两次密码不一致"
        return;
    }
    window.alert("注册成功！")
}

查看全文

相关阅读:
C++11多线程
 C++单例模式
 从五大结构体，带你掌握鸿蒙轻内核动态内存Dynamic Memory
云小课 | 云硬盘不用了如何处理？
Kafka 源码解析：Server 端的运行过程
 带你掌握4种Python 排序算法
 面试官问我：如何减少客户对交付成果的质疑
 如何基于MindSpore实现万亿级参数模型算法？
Go 接口类型
 Go 结构体

原文地址：https://www.cnblogs.com/lintingting/p/7764163.html