vuelidate for vueJs

register.vue

<div class="login-header">
      <div class="login-register">
          <router-link :to="{name: 'login'}">登录</router-link>
          <router-link :to="{ name: 'register'}" class="active">注册</router-link>
      </div>
  </div>
  <div class="login-form">
      <div class="control-group" v-bind:class="{ 'form-group--error': $v.newUser.name.$error }">
          <label class="control-label">用户名</label>
          <el-input
                  placeholder="请输入你的用户名"
                  v-model="newUser.name"
                  @input="$v.newUser.name.$touch()"
          >
          </el-input>
      </div>
      <span class="form-group__message" v-if="!$v.newUser.name.required">用户名不能为空</span>
      <span class="form-group__message" v-if="!$v.newUser.name.minLength">用户名不能太短</span>
      <span class="form-group__message" v-if="!$v.newUser.name.isUnique">用户名已经被注册</span>

      <div class="control-group" v-bind:class="{ 'form-group--error': $v.newUser.email.$error }">
          <label class="control-label">邮箱</label>
          <el-input
                  placeholder="请输入你的邮箱"
                  v-model.trim="newUser.email"
                  @input="$v.newUser.email.$touch()"
          >
          </el-input>
      </div>
      <span class="form-group__message" v-if="!$v.newUser.email.required">邮箱不能为空</span>
      <span class="form-group__message" v-if="!$v.newUser.email.email">请填写正确的邮箱格式</span>
      <span class="form-group__message" v-if="!$v.newUser.email.isUnique">邮箱已经被注册</span>

      <div class="control-group" v-bind:class="{ 'form-group--error': $v.newUser.password.$error }">
          <label class="control-label">密码</label>
          <el-input
                  placeholder="请输入你的用户密码"
                  type="password"
                  v-model.trim="newUser.password"
                  @input="$v.newUser.password.$touch()"
          >
          </el-input>
      </div>
      <span class="form-group__message" v-if="!$v.newUser.password.required">密码不能为空</span>
      <span class="form-group__message" v-if="!$v.newUser.password.minLength">密码长度最少为6位</span>

      <div class="control-group" v-bind:class="{ 'form-group--error': $v.newUser.confirm_pwd.$error }">
          <label class="control-label">密码确认</label>
          <el-input
                  placeholder="请确认用户密码"
                  type="password"
                  v-model.trim="newUser.confirm_pwd"
                  @input="$v.newUser.confirm_pwd.$touch()"
          >
          </el-input>
      </div>
      <span class="form-group__message" v-if="!$v.newUser.confirm_pwd.required">确认密码不能为空</span>
      <span class="form-group__message" v-if="!$v.newUser.confirm_pwd.sameAsPassword">确认密码不一致</span>

      <div class="control-group">
          <button
                  class="btn btn-primary btn-lg btn-block btn-login-register"
                  @click="register($v.newUser)"
          >立即注册
          </button>
      </div>
  </div>