vue 登录form表单校验

vue 登录form表单校验

<template>
  <v-app>
    <v-main class="d-flex align-center justify-center">
      <v-card
          class="pa-8 ma-3 h400"
          elevation="5">
        <v-img
            src="http://www.gov.cn/xinwen/2021-10/13/5642319/images/b50b1e7523f54d65b665a8a8128778e0.jpg"
            width="50" height="50"
            class="ma-auto"
        ></v-img>
        <v-form
            ref="loginFormRef"
            v-model="valid"
            lazy-validation>
          <v-text-field
              v-model="loginData.stuNo"
              append-icon="mdi-account"
              label="学号"
              :rules="[v => !!v || '请输入账号']"
              required/>
          <v-text-field
              v-model="loginData.password"
              append-icon="mdi-lock"
              label="密码"
              type="password"
              :rules="[v => !!v || '请输入密码']"
              required/>
          <v-card-actions class="d-flex align-center justify-center mt-5">
            <v-btn
                color="teal"
                dark
                elevation="2"
                class="mr-2"
                width="50%"
                @click="login">登录
            </v-btn>
          </v-card-actions>
        </v-form>
      </v-card>
    </v-main>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    loginVisible: 0,
    loginData: {
      stuNo: '',
      password: '',
    },
    valid: true,
  }),
  methods: {
    login() {
      let that = this;
      if (!that.$refs.loginFormRef.validate()) return
      console.log('点击了登录');
      console.log(that.loginData.stuNo);
      console.log(that.loginData.password);
    },
  }
}
</script>

<style>

.h400 {
  height: 400px;
}
</style>