vue 登录form表单校验

最新推荐文章于 2024-06-18 20:57:53 发布

勘察加熊人

最新推荐文章于 2024-06-18 20:57:53 发布

阅读量343

点赞数

分类专栏： Vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/cf8833/article/details/120994643

版权

Vue.js 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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>