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;}

标签：