(资料图)
vue部分
<template> <div class="container"> <div class="subtitle">跨过每个夜晚的星辰，终将成为你</div> <h1>创建账号 <span class="h1_sub"> have a good time!</span></h1> <div v-for="(item, index) in fields" class="in-container"> <div class="field">{{item.title}}<span> *</span></div> <input v-model="item.content" class="input-text" :type="item.type"/> </div> <div class="tips">* 密码长度8-16位 由字母和数字组成</div> <div class="sub_container"> <div class="setting">偏好设置</div> <span class="check-span"> <input v-model="receive_massage" class="checkbox" type="checkbox"/> <label class="label">接受通知邮件</label> <input v-model="certification" class="checkbox" type="checkbox" style="margin-left: 20px"/> <label class="label">实名认证</label> </span> </div> <button @click="createAccount" class="login-btn">开始旅程</button> </div></template><script>export default { name: "register", data(){ return{ fields:[{ title: "用户昵称", required:true, type:"text",content:"" }, { title: "邮件地址", required:true, type:"text",content:"" }, { title: "密码", required:true, type:"text",content:"" }, { title: "确认密码", required:true, type:"text",content:"" }, ], receive_massage: false, certification: false, } }, computed:{ name:{ get(){ return this.fields[0].content }, set(value){ return this.fields[0].content=value }, }, email:{ get(){ return this.fields[1].content }, set(value){ return this.fields[1].content=value }, }, password:{ get(){ return this.fields[2].content }, set(value){ return this.fields[2].content=value }, }, confirm_password:{ get(){ return this.fields[3].content }, set(value){ return this.fields[3].content=value }, }, }, methods:{ email_check(){ let verify = /^[A-Za-z0-9][A-Za-z0-9]+@[A-Za-z]+\.[A-Za-z]+(\.[A-Za-z])*/; if (!verify.test(this.email)){ return false } else if (verify.test(this.email)){ return true } }, createAccount(){ if (this.name.length === 0){ alert("请输入用户名！") return; } else if (this.password.length <=6 || this.password.length >=16){ alert("密码长度应为8-16位！") return; } else if(this.email.length > 0 && !this.email_check(this.email)){ alert("请输入正确的邮箱！") return; } else if(this.fields[3].content !== this.fields[2].content){ alert("两次密码输入不一致!") return; } alert("注册成功！") } }}</script><style scoped> @import "@/assets/register.css";</style>
css 部分
.container{ width: 500px; margin: 100px auto; background-color: #cae0f3; border-radius: 10px;}.subtitle{ padding-top: 50px; font-family: 华文楷体, sans-serif; letter-spacing: 1px; font-size: 12px; color: #7cbcd3; font-weight: bolder; text-align: center;}h1{ font-size: 25px; text-align: center; font-family: 华文楷体, sans-serif; color: #494545;}.h1_sub{ font-size: 15px; color: #2a9fde;}.field{ font-family: 华文楷体, sans-serif; font-size: 14px;}.input-text{ width: 250px; justify-content: center; background-color: #f6f6f3;}.in-container{ margin-top: 10px; margin-left: 120px;}.tips{ font-family: 华文楷体, sans-serif; font-size: 12px; margin-top: 5px; color: #948d8d; text-align: center;}.sub_container{ margin-top: 10px; margin-left: 120px; font-family: 华文楷体, sans-serif; font-size: 12px; color: #948d8d;}.check-span{ position: relative;}.checkbox{ position: relative; top: 3px;}.login-btn{ height: 25px; width: 200px; text-align: center; letter-spacing: 5px; margin-top: 20px; margin-left: 150px; margin-bottom: 50px; background-color: #e2d1f3;}
