【Web 登录】

最新推荐文章于 2023-11-08 22:46:01 发布

HoneyProMax

最新推荐文章于 2023-11-08 22:46:01 发布

阅读量2.2k

点赞数 1

分类专栏： # Web litemall 学习文章标签： javascript 前端 vue.js sass

本文链接：https://blog.csdn.net/qq_44559317/article/details/123583419

版权

文章目录

前言
一、登录信息检验
二、store 中注册用于触发登录操作的方法
三、浅识 Scss

前言

Web 端登录界面
实现登录信息检验、异步调用 store 中注册的用于触发登录操作的方法
图示：
在这里插入图片描述

一、登录信息检验

	// el-form rules 属性
	...
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
      auto-complete="on"
      label-position="left"
    >
    ...
      <!-- 密码 -->
      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input
          v-model="loginForm.password"
          :type="passwordType"
          name="password"
          auto-complete="on"
          tabindex="2"
          show-password
          placeholder="密码"
          @keyup.enter.native="handleLogin"
        />
      </el-form-item>
      ...

	...
  data() {
   
	const validatePassword = (rule, value, callback) => {
   
	  if (value.length < 6) {
   
	    callback(new Error("密码长度应大于6"));
	  } else {
   
	    callback();
	  }
	};
    return {
   
      loginForm: {
   
        username: "nongle",
        password: "666888",
        code: ""
      },
      codeImg: "",
      loginRules: {
   
        username: [
          {
    required: true, message: "账户不允许为空", trigger: "blur" }
        ],
        password: [
          {
    required: true, message: "密码不允许为空", trigger: "blur" },