vue部分

<template>
?<div class="container">
? ?<div class="subtitle">跨過(guò)每個(gè)夜晚的星辰，終將成為你</div>
? ?<h1>創(chuàng)建賬號(hào) <span class="h1_sub">&nbsp;&nbsp;have a good time!</span></h1>
? ?<div v-for="(item, index) in fields" class="in-container">
? ? ?<div class="field">{{item.title}}<span>&nbsp;*</span></div>
? ? ?<input v-model="item.content" class="input-text" :type="item.type"/>
? ?</div>
? ?<div class="tips">*&nbsp;密碼長(zhǎng)度8-16位 由字母和數(shù)字組成</div>
? ?<div class="sub_container">
? ? ?<div class="setting">偏好設(shè)置</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">實(shí)名認(rèn)證</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: "確認(rèn)密碼", 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("請(qǐng)輸入用戶名！")
? ? ? ?return;
? ? ?}
? ? ?else if (this.password.length <=6 || this.password.length >=16){
? ? ? ?alert("密碼長(zhǎng)度應(yīng)為8-16位！")
? ? ? ?return;
? ? ?}
? ? ?else if(this.email.length > 0 && !this.email_check(this.email)){
? ? ? ?alert("請(qǐng)輸入正確的郵箱！")
? ? ? ?return;
? ? ?}
? ? ?else if(this.fields[3].content !== this.fields[2].content){
? ? ? ?alert("兩次密碼輸入不一致!")
? ? ? ?return;
? ? ?}
? ? ?alert("注冊(cè)成功！")
? ?}
?}
}
</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;
}