ElementUI登录页面以及表单验证

 

 

 

 

<template>

  <div class="body">

    <el-form

      :model="ruleForm"

      :rules="rules"

      ref="ruleForm"

      label-position="left"

      label-width="0px"

      class="login-form"

    >

      <!-- 标题 -->

      <h3 class="title">后台管理系统</h3>

      <el-form-item prop="username">

        <el-input

          placeholder="请输入用户名/账号"

          v-model="ruleForm.username"

          clearable

        >

        </el-input>

      </el-form-item>

      <el-form-item prop="password">

        <el-input

          placeholder="请输入密码"

          v-model="ruleForm.password"

          show-password

          clearable

        >

        </el-input>

      </el-form-item>

      <el-form-item style="width: 100%">

        <el-button

          class="btn-login"

          size="medium"

          type="primary"

          style="width: 100%"

          @click="login('ruleForm')"

        >

          <span>登 录</span>

        </el-button>

      </el-form-item>

    </el-form>

  </div>

</template>

<script>

export default {

  data() {

    return {

      ruleForm: {

        username: "", //账号

        password: "", //密码

      },

      rules: {

        //表单验证规则

        username: [

          { required: true, message: "请输入用户名/账号", trigger: "blur" },

          { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },

        ],

        password: [

          { required: true, message: "请输入密码", trigger: "blur" },

          {

            min: 6,

            max: 18,

            message: "长度在 6 到 18 个字符",

            trigger: "blur",

          },

        ],

      },

    };

  },

  methods: {

    // 跳转到首页

   login(formName) {

        //表单验证

      this.$refs[formName].validate((valid) => {

        if (valid) {

          let userInfo = {

            token: "sd",

          };

          this.$store

            .dispatch("LoginByUsername", userInfo)

            .then(() => {

              this.$router.push("/index");//页面跳转到首页

            })

            .catch(() => {});

        }

      });

    },

  },

};

</script>

<style lang="less" scoped>

.body {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100%;

  background-size: cover;

  .login-form {

    border-radius: 6px;

    background: #ffffff;

    width: 385px;

    padding: 25px 25px 5px 25px;

  }

}

</style>