【Web 登录】

最新推荐文章于 2024-07-05 00:19:01 发布

HoneyProMax

最新推荐文章于 2024-07-05 00:19:01 发布

阅读量2.3k

点赞数 1

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

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

版权

本文介绍了Web登录界面的实现，包括登录信息检验的原理和避免全局变量污染的方法，以及在Vue.js中如何在store中注册并触发登录操作。同时，文章还对Scss的基础知识进行了讲解，如嵌套选择器、变量、mixin和placeholder。

摘要由CSDN通过智能技术生成

前言

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" },