JavaWeb JavaScript ⑩ 日程管理第一期

自我消耗，敏感是我，

明媚是我，

我横跳在不同的情绪中

—— 24.8.31

一、登录页及校验

1.校验账号格式

        // 校验账号格式
        function checkUsername(){
            // 定义正则表达式表示字符串规则
            var usernameReg = /^[a-zA-Z0-9]{5,10}$/;
            // 获取用户名输入框的值
            var usernameInput = document.getElementById("usernameInput");
            var username = usernameInput.value;
            // 获取提示信息元素
            var usernameMsg = document.getElementById("usernameMsg");
            // 判断用户名是否符合规则
            if(usernameReg.test(username)){
                // 符合规则，返回true，在页面上提示OK
                usernameMsg.innerText = "OK";
                return true;
            }else{
                // 不符合规则，显示提示信息
                usernameMsg.innerText = "用户名必须为5-10位字母、数字或下划线";
                // 格式有误时，返回false，阻止表单提交
                return false;
            }
        }

2.校验密码格式

        // 校验密码是否符合规则的函数
        function checkUserPwd(){
            // 定义正则表达式表示字符串规则
            var userPwdReg = /^[0-9]{6}$/;
            // 获取密码输入框的值
            var userPwdInput = document.getElementById("userPwdInput");
            var userPwd = userPwdInput.value;
            // 获得格式提示的框
            var userPwdMsg = document.getElementById("userPwdMsg");
            // 判断密码是否符合规则
            if(userPwdReg.test(userPwd)){
                // 符合规则，显示提示信息
                userPwdMsg.innerText = "OK";
                return true;
            }else{
                // 不符合规则，显示提示信息
                userPwdMsg.innerText = "用户名密码格式有误，密码必须是六位数字";
                return false;
            }
        }

3.检验表单函数

        // 校验表单函数
        function checkForm(){
            var flag1 = checkUsername();
            var flag2 = checkUserPwd();

            // 如果两个函数都返回true，说明格式都正确，可以提交表单
            return flag1 && flag2;
        }

4.CSS样式

    <style>
        .ht{
            text-align: center;
            color: cadetblue;
            font-family: 幼圆;
            }

        .tab{
            width: 500px;
            border: 5px solid cadetblue;
            margin: 0px auto;
            border-radius: 5px;
            font-family: 幼圆;
            }
        
        .ltr td{
            border: 1px solid  powderblue;
            }

        .ipt{
            border: 0px;
            width: 50%;
            }

        .btn1{
            border: 2px solid powderblue;
            border-radius: 4px;
            width:60px;
            background-color: antiquewhite;
            }

        #usernameMsg , #userPwdMsg {
            color: gold
            }

        .buttonContainer{
            text-align: center;
            }
    </style>

5.JavaScript代码

    <script>
        // 校验账号格式
        function checkUsername(){
            // 定义正则表达式表示字符串规则
            var usernameReg = /^[a-zA-Z0-9]{5,10}$/;
            // 获取用户名输入框的值
            var usernameInput = document.getElementById("usernameInput");
            var username = usernameInput.value;
            // 获取提示信息元素
            var usernameMsg = document.getElementById("usernameMsg");
            // 判断用户名是否符合规则
            if(usernameReg.test(username)){
                // 符合规则，返回true，在页面上提示OK
                usernameMsg.innerText = "OK";
                return true;
            }else{
                // 不符合规则，显示提示信息
                usernameMsg.innerText = "用户名必须为5-10位字母、数字或下划线";
                // 格式有误时，返回false，阻止表单提交
                return false;
            }
        }

        // 校验密码是否符合规则的函数
        function checkUserPwd(){
            // 定义正则表达式表示字符串规则
            var userPwdReg = /^[0-9]{6}$/;
            // 获取密码输入框的值
            var userPwdInput = document.getElementById("userPwdInput");
            var userPwd = userPwdInput.value;
            // 获得格式提示的框
            var userPwdMsg = document.getElementById("userPwdMsg");
            // 判断密码是否符合规则
            if(userPwdReg.test(userPwd)){
                // 符合规则，显示提示信息
                userPwdMsg.innerText = "OK";
                return true;
            }else{
                // 不符合规则，显示提示信息
                userPwdMsg.innerText = "用户名密码格式有误，密码必须是六位数字";
                return false;
            }
        }

        // 校验表单函数
        function checkForm(){
            var flag1 = checkUsername();
            var flag2 = checkUserPwd();

            // 如果两个函数都返回true，说明格式都正确，可以提交表单
            return flag1 && flag2;
        }
    </script>

6.整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ht{
            text-align: center;
            color: cadetblue;
            font-family: 幼圆;
            }

        .tab{
            width: 500px;
            border: 5px solid cadetblue;
            margin: 0px auto;
            border-radius: 5px;
            font-family: 幼圆;
            }
        
        .ltr td{
            border: 1px solid  powderblue;
            }

        .ipt{
            border: 0px;
            width: 50%;
            }

        .btn1{
            border: 2px solid powderblue;
            border-radius: 4px;
            width:60px;
            background-color: antiquewhite;
            }

        #usernameMsg , #userPwdMsg {
            color: gold
            }

        .buttonContainer{
            text-align: center;
            }
    </style>

    <script>
        // 校验账号格式
        function checkUsername(){
            // 定义正则表达式表示字符串规则
            var usernameReg = /^[a-zA-Z0-9]{5,10}$/;
            // 获取用户名输入框的值
            var usernameInput = document.getElementById("usernameInput");
            var username = usernameInput.value;
            // 获取提示信息元素
            var usernameMsg = document.getElementById("usernameMsg");
            // 判断用户名是否符合规则
            if(usernameReg.test(username)){
                // 符合规则，返回true，在页面上提示OK
                usernameMsg.innerText = "OK";
                return true;
            }else{
                // 不符合规则，显示提示信息
                usernameMsg.innerText = "用户名必须为5-10位字母、数字或下划线";
                // 格式有误时，返回false，阻止表单提交
                return false;
            }
        }

        // 校验密码是否符合规则的函数
        function checkUserPwd(){
            // 定义正则表达式表示字符串规则
            var userPwdReg = /^[0-9]{6}$/;
            // 获取密码输入框的值
            var userPwdInput = document.getElementById("userPwdInput");
            var userPwd = userPwdInput.value;
            // 获得格式提示的框
            var userPwdMsg = document.getElementById("userPwdMsg");
            // 判断密码是否符合规则
            if(userPwdReg.test(userPwd)){
                // 符合规则，显示提示信息
                userPwdMsg.innerText = "OK";
                return true;
            }else{
                // 不符合规则，显示提示信息
                userPwdMsg.innerText = "用户名密码格式有误，密码必须是六位数字";
                return false;
            }
        }

        // 校验表单函数
        function checkForm(){
            var flag1 = checkUsername();
            var flag2 = checkUserPwd();

            // 如果两个函数都返回true，说明格式都正确，可以提交表单
            return flag1 && flag2;
        }
    </script>
</head>
<body>
    <h1 class="ht">欢迎使用日程管理系统</h1>
    <h3 class="ht">请登录</h3>
    <form method="post" action="/user/login" onsubmit="return checkForm()">
        <table class="tab" cellspacing="0px">
            <tr class="ltr">
                <td>请输入账号</td>
                <td>
                    <input class="ipt" type="text" id="usernameInput" name="username" onblur="checkUsername()">
                    <span id="usernameMsg" class="=msg"></span>
                </td>
            </tr>
            <tr class="ltr">
                <td>请输入密码</td>
                <td>
                    <input class="ipt" type="password" name="userPwd" id="userPwdInput" onblur="checkUserPwd()">
                    <span id="userPwdMsg"></span>
                </td>
            </tr>
            <tr class="ltr">
                <td colspan="2" class="buttonContainer">
                    <input class="btn1" type="submit" value="登录">
                    <input class="btn1" type="reset" value="重置">
                    <button class="btn1"><a href="regist.html">去注册</a></button>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

7.效果展示

二、注册页及校验

1.校验账号格式

        // 验证账号格式
        function checkUsername(){
            var usernameReg = /^[a-zA-Z0-9]{5,10}$/;
            var usernameInput = document.getElementById("usernameInput")    ;
            var username = usernameInput.value;
            var usernameMsg = document.getElementById("usernameMsg");
            if(!usernameReg.test(username)){
                usernameMsg.innerText = "账号格式不正确";
                return false;
            }else{
                usernameMsg.innerText = "OK";
                return true;
            }
        }

2.校验密码格式

        // 验证密码格式
        function checkUserPwd(){
            var userPwdReg = /^\d{6}$/;
            // 获取密码输入框的值
            var userPwdInput = document.getElementById("userPwdInput")
            var userPwd = userPwdInput.value;
            // 获取密码提示信息
            var userPwdMsg = document.getElementById("userPwdMsg");
            if(!userPwdReg.test(userPwd)){
                userPwdMsg.innerText = "账号格式不正确";
                return false;
            }else{
                // 符合规则，打印提示信息
                userPwdMsg.innerText = "OK";
                return true;
            }
        }

3.校验确认密码格式

        // 验证确认密码
        function checkReUserPwd(){
            // 密码格式验证
            var userPwdReg = /^\d{6}$/;
            // 再次输入的密码
            var reUserPwdInput = document.getElementById("reUserPwdInput")
            var reUserPwd = reUserPwdInput.value;
            var reUserPwdMsg = document.getElementById("reUserPwdMsg");
            if(!userPwdReg.test(reUserPwd)){
                reUserPwdMsg.innerText = "密码格式不正确";
                return false;
            }
            // 获得上次输入的密码
            var userPwdInput = document.getElementById("userPwdInput")
            var userPwd = userPwdInput.value;
            // 判断两次输入的密码是否一致
            if(reUserPwd != userPwd){
                reUserPwdMsg.innerText = "两次输入的密码不一致";
                return false;
            }else{
                reUserPwdMsg.innerText = "OK";
                return true;
            }
        }

4.验证表单函数

        // 验证表单函数
        function checkForm(){
            var flag1 = checkUsername();
            var flag2 = checkUserPwd();
            var flag3 = checkReUserPwd();

            return flag1 && flag2 && flag3;
        }

5.CSS样式

    <style>
        .ht{
            text-align: center;
            color:cadetblue;
            font-family: 幼圆;
        }

        .tab{
            width: 500px;
            border: 5px solid cadetblue;
            margin: 0px auto;
            border-radius: 5px;
            font-family: 幼圆;
        }

        .ltr td{
            border: 1px solid powderblue;
        }

        .ipt{
            bottom: 0px;
            width: 50%;
        }

        .btn1{
            border: 2px solid powderblue;
            border-radius: 4px;
            width: 60px;
            background: antiquewhite;
        }

        .msg{
            color: gold;
        }

        .buttonContainer{
            text-align: center;
        }

    </style>

6.JavaScript代码

    <script>
        // 验证账号格式
        function checkUsername(){
            var usernameReg = /^[a-zA-Z0-9]{5,10}$/;
            var usernameInput = document.getElementById("usernameInput")    ;
            var username = usernameInput.value;
            var usernameMsg = document.getElementById("usernameMsg");
            if(!usernameReg.test(username)){
                usernameMsg.innerText = "账号格式不正确";
                return false;
            }else{
                usernameMsg.innerText = "OK";
                return true;
            }
        }

        // 验证密码格式
        function checkUserPwd(){
            var userPwdReg = /^\d{6}$/;
            // 获取密码输入框的值
            var userPwdInput = document.getElementById("userPwdInput")
            var userPwd = userPwdInput.value;
            // 获取密码提示信息
            var userPwdMsg = document.getElementById("userPwdMsg");
            if(!userPwdReg.test(userPwd)){
                userPwdMsg.innerText = "账号格式不正确";
                return false;
            }else{
                // 符合规则，打印提示信息
                userPwdMsg.innerText = "OK";
                return true;
            }
        }

        // 验证确认密码
        function checkReUserPwd(){
            // 密码格式验证
            var userPwdReg = /^\d{6}$/;
            // 再次输入的密码
            var reUserPwdInput = document.getElementById("reUserPwdInput")
            var reUserPwd = reUserPwdInput.value;
            var reUserPwdMsg = document.getElementById("reUserPwdMsg");
            if(!userPwdReg.test(reUserPwd)){
                reUserPwdMsg.innerText = "密码格式不正确";
                return false;
            }
            // 获得上次输入的密码
            var userPwdInput = document.getElementById("userPwdInput")
            var userPwd = userPwdInput.value;
            // 判断两次输入的密码是否一致
            if(reUserPwd != userPwd){
                reUserPwdMsg.innerText = "两次输入的密码不一致";
                return false;
            }else{
                reUserPwdMsg.innerText = "OK";
                return true;
            }
        }

        // 验证表单函数
        function checkForm(){
            var flag1 = checkUsername();
            var flag2 = checkUserPwd();
            var flag3 = checkReUserPwd();

            return flag1 && flag2 && flag3;
        }

    </script>

7.整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ht{
            text-align: center;
            color:cadetblue;
            font-family: 幼圆;
        }

        .tab{
            width: 500px;
            border: 5px solid cadetblue;
            margin: 0px auto;
            border-radius: 5px;
            font-family: 幼圆;
        }

        .ltr td{
            border: 1px solid powderblue;
        }

        .ipt{
            bottom: 0px;
            width: 50%;
        }

        .btn1{
            border: 2px solid powderblue;
            border-radius: 4px;
            width: 60px;
            background: antiquewhite;
        }

        .msg{
            color: gold;
        }

        .buttonContainer{
            text-align: center;
        }

    </style>

    <script>
        // 验证账号格式
        function checkUsername(){
            var usernameReg = /^[a-zA-Z0-9]{5,10}$/;
            var usernameInput = document.getElementById("usernameInput")    ;
            var username = usernameInput.value;
            var usernameMsg = document.getElementById("usernameMsg");
            if(!usernameReg.test(username)){
                usernameMsg.innerText = "账号格式不正确";
                return false;
            }else{
                usernameMsg.innerText = "OK";
                return true;
            }
        }

        // 验证密码格式
        function checkUserPwd(){
            var userPwdReg = /^\d{6}$/;
            // 获取密码输入框的值
            var userPwdInput = document.getElementById("userPwdInput")
            var userPwd = userPwdInput.value;
            // 获取密码提示信息
            var userPwdMsg = document.getElementById("userPwdMsg");
            if(!userPwdReg.test(userPwd)){
                userPwdMsg.innerText = "账号格式不正确";
                return false;
            }else{
                // 符合规则，打印提示信息
                userPwdMsg.innerText = "OK";
                return true;
            }
        }

        // 验证确认密码
        function checkReUserPwd(){
            // 密码格式验证
            var userPwdReg = /^\d{6}$/;
            // 再次输入的密码
            var reUserPwdInput = document.getElementById("reUserPwdInput")
            var reUserPwd = reUserPwdInput.value;
            var reUserPwdMsg = document.getElementById("reUserPwdMsg");
            if(!userPwdReg.test(reUserPwd)){
                reUserPwdMsg.innerText = "密码格式不正确";
                return false;
            }
            // 获得上次输入的密码
            var userPwdInput = document.getElementById("userPwdInput")
            var userPwd = userPwdInput.value;
            // 判断两次输入的密码是否一致
            if(reUserPwd != userPwd){
                reUserPwdMsg.innerText = "两次输入的密码不一致";
                return false;
            }else{
                reUserPwdMsg.innerText = "OK";
                return true;
            }
        }

        // 验证表单函数
        function checkForm(){
            var flag1 = checkUsername();
            var flag2 = checkUserPwd();
            var flag3 = checkReUserPwd();

            return flag1 && flag2 && flag3;
        }

    </script>
</head>
<body>
    <h1 class="ht">欢迎使用日程管理系统</h1>
    <h3 class="ht">请注册</h3>
    <form method="post" action="/user/regist" onsubmit="return checkForm()">
        <table class="tab" cellspacing="0px">
            <tr class="ltr">
                <td>请输入账号</td>
                <td>
                    <input class="ipt" type="text" name="username" id="usernameInput" onblur="checkUsername()">
                    <span id="usernameMsg" class="msg"></span>
                </td>
            </tr>
            <tr class="ltr">
                <td>请输入密码</td>
                <td>
                    <input class="ipt" type="password" name="userPwd" id="userPwdInput" onblur="checkUserPwd()">
                    <span id="userPwdMsg" class="msg"></span>
                </td>
            </tr>
            <tr class="ltr">
                <td>确认密码</td>
                <td>
                    <input type="password" class="ipt" id="reUserPwdInput" onblur="checkReUserPwd()">
                    <span id="reUserPwdMsg" class="msg"></span>
                </td>
            </tr>
            <tr class="ltr">
                <td colspan="2" class="buttonContainer">
                    <input type="submit" class="btn1" value="注册">
                    <input type="reset" class="btn1" value="重置">
                    <button class="btn1"><a href="login.html">去登陆</a></button>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>