注册系统（通过html5实现）

宇宙核

于 2024-02-10 23:19:29 发布

阅读量351

点赞数 9

分类专栏：前端文章标签： html5 javascript css

本文链接：https://blog.csdn.net/lpx666168/article/details/136093465

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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;
        }
        .msg {
          color: rgb(233, 26, 108);
        }
        .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");
        //格式有误时，返回false,在页面上提示
        if (!usernameReg.test(username)) {
          usernameMsg.innerText = "账号格式有误";
          return false;
        }
        //格式OK,返回true在页面上提示OK
        usernameMsg.innerText = "OK";
        return true;
      }

      //校验密码的方法
      function checkUserPwd() {
        //定义正则
        var passwordReg = /^[0-9]{6}$/;
        var userPwd = document.getElementById("userPwdInput").value;
        var userPwdMsgSpan = document.getElementById("userPwdMsg");
        if (!passwordReg.test(userPwd)) {
          userPwdMsgSpan.innerText = "密码格式有误";
          return false;
        }
        userPwdMsgSpan.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
            }
            reUserPwdMsg.innerText="OK"
            return true
        }

        //表单提交时统一校验
        function checkForm(){
            return checkUsername()&&checkUserPwd()&&checkReUserPwd()
        }


    </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"id="usernameInput"type="text"name="username"onblur="checkUsername()">
                    <span id="usernameMsg"class="msg"></span>
                </td>
            </tr>
            <tr class="ltr">
                <td>请输入密码</td>
                <td>
                    <input class="ipt"id="userPwdInput"type="password"name="userPwd"onblur="checkUserPwd()">
                    <span id="userPwdMsg"class="msg"></span>
                </td>
            </tr>
            <tr class="ltr">
                <td>确认密码</td>
                <td>
                    <input class="ipt"id="reUserPwdInput"type="password"onblur="checkReUserPwd()">
                    <span id="reUserPwdMsg"class="msg"></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="login.html">去登录</a></button>
                </td>
            </tr>
        </table>
</body>
</html>