注册页面代码

最新推荐文章于 2024-04-05 06:35:57 发布

Mr.Joden

最新推荐文章于 2024-04-05 06:35:57 发布

阅读量1.2k

点赞数

分类专栏：前段文章标签： css html css3

本文链接：https://blog.csdn.net/m0_60633107/article/details/128045668

版权

前段专栏收录该内容

4 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 样式 -->
    <style>
        #register{
            width: 650px;
            height: 550px;
            margin: 200px auto;
            background-color: white;
            box-shadow: 3px 3px 3px 3px grey;
            text-align: center;
            border-radius: 10px;
        }
        .title{
            padding-top: 10px;
            height: 50px;
        }
        .register_form .input_user,.register_form .input_psd,.register_form .input_epsd{
            width: 320px;
            height: 50px;
            box-shadow: 3px 3px 3px 3px grey;
            border: none;
            margin-top: 20px;
            font-size: 20px;
            border-radius: 5px;
        }
        .submit_button{
            height: 50px;
            width: 400px;
            margin-top: 70px;
            background-color: green;
            border: none;
            box-shadow: 3px 3px 3px 3px grey;
            border-radius: 5px;
            color: white;
            font-size: 20px;
            font-weight: bolder;
        }
        .form_label{
            width: 80px;
            display: inline-block;
            color: gray;
            font-weight: bold;
            font-size: 16px;
        }
        .submit_button:hover{
            background-color: rgb(54, 150, 54);
            cursor:pointer;
            box-shadow: 3px 3px 3px 3px lightgray;
        }
        .reguser_err,.regpsd_err,.regepsd_err{
            color: red;
            height: 30px;
            font-size: 16px;
            width: 400px;
            margin: auto;
            padding-left: 80px;
            padding-top: 10px;
        }
        .form_psd,.form_user,.from_epsd{
            height: 100px;
        }
    </style>


<div id="register">
    <div class="title">
        <h1>Register</h1>
    </div>
    <form action="" method="post" class="register_form">
        <div class="form_user">
            <span class="form_label" >用户名称：</span>
            <input type="text" name="username" class="input_user" @blur="blurRegUser" ref="reguser">
            <div class="reguser_err" ref="reguser_err"></div>
        </div>
        <div class="form_psd">
            <span class="form_label">密&emsp;&emsp;码：</span>
            <input type="password" name="password" class="input_psd" @blur="blurRegPsd" ref="regpsd">
            <div class="regpsd_err" ref="regpsd_err"></div>
        </div>
        <div class="form_epsd">
            <span class="form_label">确认密码：</span>
            <input type="password" name="epassword" class="input_epsd" @blur="blurRegEpsd" ref="regepsd">
            <div class="regepsd_err" ref="regepsd_err"></div>
        </div>
        <div>
            <input type="submit" class="submit_button" value="注册">
        </div>
    </form>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 这里引入vue主要用来做用户注册提示交互
    var vm = new Vue({
        el:'#register',
        data:{
            
        },
        methods:{
            // 用户格式验证
            blurRegUser(){
                var input_name = this.$refs.reguser.value;
                if (input_name.trim()==""){
                    this.$refs.reguser_err.innerHTML = "用户名不能为空"
                }else if (!(input_name.length <= 10 && input_name.length >= 2)){
                    this.$refs.reguser_err.innerHTML = "用户名格式错误"
                }else if(!isNaN(input_name)){
                    this.$refs.reguser_err.innerHTML = "用户名不能是纯数字"
                }else if(!(new RegExp(/^[a-zA-Z,\u4e00-\u9fa5]+[-_a-zA-Z0-9,,\u4e00-\u9fa5]{1,9}/).test(input_name))){
                    this.$refs.reguser_err.innerHTML = "用户名不能以数字或符号开头"
                }
                else{
                    this.$refs.reguser_err.innerHTML = "";
                }
            },
            // 密码格式验证
            blurRegPsd(){
                var input_psd = this.$refs.regpsd.value;
                if(input_psd.trim()==""){
                    this.$refs.regpsd_err.innerHTML = "请填写密码"
                }else if(input_psd.length>=16 && input_psd.length<=8){
                    this.$refs.regpsd_err.innerHTML = "密码格式错误"
                }else if(!new RegExp(/^[a-zA-Z0-9][-_a-zA-Z0-9]{7,15}$/).test(input_psd) || !isNaN(input_psd) || 
                    new RegExp(/^[a-zA-Z]+$/).test(input_psd) || !(new RegExp(/[\w\W]*[0-9]+[\w\W]*/)).test(input_psd)){
                    this.$refs.regpsd_err.innerHTML = "密码由8-16位数字和字母组成"
                }
                else{
                    this.$refs.regpsd_err.innerHTML = ""

                }
            },
            blurRegEpsd(){
                var input_psd = this.$refs.regpsd.value;
                var input_epsd = this.$refs.regepsd.value;
                if (!(input_psd == input_epsd)){
                    this.$refs.regepsd_err.innerHTML = "两次输入的密码不一致"
                }else{
                    this.$refs.regepsd_err.innerHTML = ""
                }
            }
        },

    })
</script>

</body>

</html>