vue +element ui 登录页面

原创已于 2024-07-02 09:02:57 修改 · 1.3w 阅读

38 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #ui #javascript

于 2019-08-16 16:43:31 首次发布

vue实战专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用Vue CLI创建项目，结合Element UI搭建一个登录页面，并着重讨论了表单验证的过程。在实现过程中，遇到一个关于Element UI表单验证的警告，提示model缺失。为解决这个问题，将表单的v-model改为了:model，从而成功绑定数据并消除了警告。

vue-cli

element ui

表单验证

实现效果：

注意一点：

出现一个警告：[Element Warn][Form]model is required for validat

解决方法：将form绑定数据由v-model换成 :model

具体代码：

<template>
  <div id="login">
    <div class="loginToHome">
      <el-form
        ref="form"
        :model="form"
        :rules="ruleForm"
        status-icon
        label-width="80px"
        class="loginForm"
      >
        <h3>登陆</h3>
        <el-form-item
          label="用户名"
          prop="name"
        >
          <el-input
            type="text"
            v-model="form.name"
            auto-complete="off"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input
            type="password"
            v-model="form.password"
            auto-complete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="homeBut"
            type="primary"
            plain
            @click="submit"
            :loading="logining"
          >登录</el-button>
          <el-button
            class="loginBut"
            type="primary"
            plain
            @click="resetForm()"
          >重置</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      logining: false,
      form: {
        name: 'admin',
        password: '123456'
      },
      ruleForm: {
        name: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ]
      }
    }
  },
  methods: {
    submit(event) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.logining = true;
          if (this.form.name === 'admin' &&
            this.form.password === '123456') {
            this.logining = false;
            sessionStorage.setItem('user', this.form.name);
            this.$router.push({ name: 'home' });
          } else {
            this.logining = false;
            this.$alert('name or password wrong!', 'info', {
              confirmButtonText: 'ok'
            })
          }
        } else {
          console.log('error submit!');
          return false;
        }
      })
    },
    resetForm() {
      this.$refs.form.resetFields();
    }

  }
}
</script>
<style>
.loginToHome {
  position: absolute;
  left: 0px;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 400px;
  height: 260px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #dcdfe6;
}
.loginForm {
  text-align: center;
  padding-top: 15px;
  padding-right: 30px;
  top: 10px;
}
.homeBut {
  position: absolute;
  left: 0px;
}
.loginBut {
  position: absolute;
  right: 0px;
}
</style>