vue-实现用户的注册验证（基于前端）

vue部分

<template>
 <div class="container">
   <div class="subtitle">跨过每个夜晚的星辰，终将成为你</div>
   <h1>创建账号 <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;密码长度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;
}