使用Vuetify构建用户注册页面的UI并实现表单验证【实验五】

注册界面展示：

1. 在VS Code中鼠标右键单击项目的components目录，在弹出的菜单中选择“新建文件”，在输入框中输入新建文件的文件名为UserRegister.vue，在此文件中添加以下代码：

<script lang="ts" setup>

import {onMounted, ref, getCurrentInstance} from 'vue';

import {login} from '@/api/user';

import {createToast} from "mosha-vue-toastify";

import {usernameRules,passwordRules,confirmPasswordRules,nameRules,mobileRules,emailRules} from "@/hooks/useValidRule";

import {username,password,confirmpassword,name,phone,email,show1,show2} from "@/hooks/useValidRule";



const handleLogin = async () => {

  const {valid} = await instance.ctx.$refs.form.validate()

  if (valid) {

    if (username.value == '' || password.value == '') {

      createToast('用户名或密码不能为空！', {position: 'top-center', showIcon: true})

    } else {

      try {

        const res = await login({username: username.value, password: password.value})

        createToast(res.data.msg, {position: 'top-center', showIcon: true})

      } catch (e) {

        alert(e)

      }

    }

  }

}

let instance: any

onMounted(() => {

  instance = getCurrentInstance()

})

const reset = () => {

  instance.ctx.$refs.form.reset()

}

</script>

<template>

  <v-container class="h-100  d-flex align-center justify-center">

    <v-card width="500">

      <v-card-title>用户注册</v-card-title>

      <v-card-text class="pa-8">

        <v-form ref="form">

          <v-text-field variant="underlined" v-model="username" required

                        :counter="20"

                        label="账号"
                        
                        :rules="usernameRules"

          ></v-text-field>

          <v-text-field variant="underlined" v-model="password" required

                        :counter="20"

                        :append-icon="show1 ? 'visibility' : 'visibility_off'"

                        label="密码"

                        :type="show1 ? 'text' : 'password'"

                        :rules="passwordRules"

                        @click:append="show1 = !show1"


          ></v-text-field>

          <v-text-field variant="underlined" v-model="confirmpassword" required

                        :counter="20"

                         :append-icon="show2 ? 'visibility' : 'visibility_off'"

                        label="确认密码"

                        :type="show2 ? 'text' : 'password'"

                        :rules="confirmPasswordRules"

                        @click:append="show2 = !show2"

          ></v-text-field>

          <v-text-field variant="underlined" v-model="name" required

                        :counter="20"

                        label="输入姓名"
                        
                        :rules="nameRules"

          ></v-text-field>

                    <v-text-field variant="underlined" v-model="phone" required

                        :counter="20"

                        label="输入电话号码"
                        
                        :rules="mobileRules"

          ></v-text-field>

          <v-text-field variant="underlined" v-model="email" required

                        :counter="20"

                        label="输入邮箱"
                        
                        :rules="emailRules"

          ></v-text-field>

          <v-row class="mt-5">

            <v-btn class="ml-5" @click="handleLogin">提交</v-btn>

            <v-btn class="ml-5" @click="reset">复位</v-btn>

          </v-row>

        </v-form>

      </v-card-text>

    </v-card>

  </v-container>

</template>

<style scoped>

</style>

2.在useValidRule.ts文件中添加验证规则：

import {ref} from "vue"

    export const username = ref('')
    export const password = ref('')
    export const confirmpassword = ref('')
    export const name = ref('')
    export const phone = ref('')
    export const email = ref('')

    export const show1 = ref(false)
    export const show2 = ref(false)

export const usernameRules = ref([

    (v: string) => !!v || '必须输入账号!',

    (v: string ) => (v && v.length <= 20 && v.length >= 3) || '账号的长度为3到20个字符!',

])

export const passwordRules = ref([
    
    (v: string) => !!v || '必须输入密码!',

    (v: string ) => (v && v.length <= 20 && v.length >= 8) || '密码的长度为8到20个字符!',

])

export const confirmPasswordRules = ref([

    (v: string) => !!v || '必须重新输入密码!',

    (v: string ) => (v && v.length <= 20 && v.length >= 8) || '密码的长度为8到20个字符!',

    (v: string) => v === password.value || '密码和确认密码不一致',

])

export const nameRules = ref([

    (v: string) => !!v || '必须输入姓名!',

    (v: string ) => (v && v.length <= 20 && v.length >= 5) || '名字的长度为5到20个字符!',

])

export const mobileRules = ref([

    (v: string) => !!v || '必须输入电话号码!',

    (v: string ) => (v && v.length === 11) || '请输入有效的电话号码(11位)',

])

export const emailRules = ref([

    (v: string) => !!v || '必须输入邮箱!',

    (v: string) => /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.test(v) || '请输入有效的邮箱地址',

])