用户注册页面_get注册页-CSDN博客

本文链接：https://blog.csdn.net/qq_43241999/article/details/102538024
用户注册页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>注册页面</title>
<script>
    //验证密码强度
    function checkStrength()
    {
        var strength = document.getElementById("strength");
        var psw1 = document.getElementById("psw1").value;
        var length = psw1.length;
        if(length>1&&length<3){
            strength.innerHTML = "弱";
        }
        else if(length>=3&&length<6)
        {
            strength.innerHTML = "中";
        }
        else{
            strength.innerHTML = "强";
        }
    }
    //验证密码两次输入是否一致
    function checkPSW()
    {
        var psw1 = document.getElementById("psw1").value;
        var psw2 = document.getElementById("psw2").value;
        var pswInfo = document.getElementById("pswInfo");
        if(psw1 != psw2)
        {
            pswInfo.innerHTML = "两次输入的密码必须一致";
        }
    }
    //注册方法
    function reg()
    {
        var suername = document.getElementById("username").value;
        var email = document.getElementById("email").value;
        var gender = document.getElementById("gender").value;
        var birth = document.getElementById("birth").valuel;
        var address = document.getElementById("address").value;
        var number = document.getElementById("number").value;
        if(document.getElementById("username").checkValidity()//判断用户名是否通过校验
            &&document.getElementById("psw1").checkValidity()//判断密码是否通过校验
            &&document.getElementById("psw2").checkValidity()//判断重复密码是否通过校验
            &&document.getElementById("email").checkValidity()//判断电子邮箱是否通过校验
            &&document.getElementById("birth").checkValidity()//判断生日是否通过校验
            &&document.getElementById("address").checkValidity()//判断地址是否通过校验
            &&document.getElementById("number").checkValidity()//判断学号是否通过校验
        )
        {
            alert(
                '确认注册信息\n'+
                '用户名:'+username+'\n'+
                '电子邮箱:'+email+'\n'+
                '性别:'+gender+'\n'+
                '生日:'+birth+'\n'+
                '住址:'+address+'\n'+
                '学号:'+number+'\n'
            )
        }
    }
  </script>
<form>
    <fieldset>
        <legend>用户注册页面</legend>
        <center>
            <div style="padding:5px;width:600px">
                <h4>用户登录信息</h4>
                <table width = '100%'>
                    <tr>
                        <td width = '20%'>用户名</td>
                        <td width = '40%'><input id="username" type="text" required="true"/>		</td>
                        <td width = '40%'><font color = "red">*</font></td>
                    </tr>
                    <tr>
                        <td>邮箱</td>
                        <td><input id="email" type="email" required="true"/></td>
                        <td><font color="red">*</font></td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td><input id="psw1" type="password" required="true" onkeyup="checkStrength()"/></td>
                        <td><font color="red">*</font><span id="strength"></span></td>
                    </tr>
                    <tr>
                        <td>确认密码</td>
                        <td><input type="psw2" type="password" required="true" onblur="checkPSW()"/></td>
                        <td><font color="red">*</font><span id="pswInfo"></span> </td>
                    </tr>
                    <tr>
                            <td>学号</td>
                            <td><input id="number" type="text" required="true" /></td>
                            <td><font color="red">*</font></td>
                        </tr>   
                </table>
            </div>
            <div style="margin-top: 10px";margin-bottom:20px>
                <h3>用户基本信息</h3>
                <table width = '100%'>
                    <tr>
                        <td width="20%">性别</td>
                        <td width="40%">
                            <select id="gender">
                                <option value="男">男</option>
                                <option value="女">女</option>
                                <option value="其他">其他</option>
                            </select>
                        </td>
                        <td width="20%">&nbsp;</td>
                    </tr>
                    <tr>
                        <td>出生年月</td>
                        <td><input id="birth" type="date"/></td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </div>
            <input type="submit" value="注册新用户" onclick="reg()">
            <input type="reset" value="重置">
        </center>
    </fieldset>
</form>
</head>
<body>

</body>
</html>