前端案例:简易登录表单的制作,包括用户名、密码、随机验证码(代码完整,复制即用)

简介: 前端案例:简易登录表单的制作,包括用户名、密码、随机验证码(代码完整,复制即用)

案例效果

1.gif


       本案例基于 vue.js 和  Element UI 实现。随机验证码采用 DOM 操作和 canvas 绘制,可随机生成和刷新;后续程序逻辑直接填入方法即可。

Element UI 下载安装

//npm安装element
npm i element-ui -S
//vue项目中全局引入 src/main.js中
import ElementUI from 'element-ui';
Vue.use(ElementUI);

       element ui 的使用方式参见官网:

Element - The world's most popular Vue UI framework

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

https://element.eleme.cn/#/zh-CN


完整代码+详细注释

<template>
  <div>
    <div class="login">
      <p>登录表单</p>
      <div class="form">
        <!--用户名-->
        <div class="userAndPass">
          <el-input class="txt" v-model="user" placeholder="用户名"></el-input>
        </div>
        <!--密码-->
        <div class="userAndPass">
          <el-input class="txt" type="password" v-model="pwd" placeholder="密码"></el-input>
        </div>
        <!--验证码-->
        <div class="userAndPass">
          <el-input class="txt" type="text" v-model="code" placeholder="验证码"></el-input>
        </div>
        <!--验证码区域-->
        <div id="codeBox">
          <canvas width="112" height="38" id="verifyCanvas"></canvas>
        </div>
        <!--验证码生成的图片-->
        <img id="code_img" @click="refreshCode">
        <div style="display: flex;">
          <!--记住密码-->
          <div class="remember" @click="rem">
            <img v-show="isRem" src="/static/login_new1/Select%20Reveal.png" alt="">
            <div v-show="notRem"
                 style="width: 0.2rem;height: 0.2rem;background-color: white;border-radius: 50%;margin-right: 0.05rem"></div>
            记住密码
          </div>
          <!--登录按钮-->
          <div class="btn" @click="login">
            <p>登录</p>
          </div>
        </div>
        <p @click="forget" class="forget">忘记密码?</p>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        user: '', //用户名
        pwd: '', //密码
        code: '', //用户输入的验证码
        rand: [], //随机生成的验证码
        isRem: false,//记住密码
        notRem: true, //不记住密码(默认此选项)
        codeList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
          'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i',
          'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'], //随机验证码可选字母
      }
    },
    methods: {
      //点击登录
      login() {
        //验证码的验证
        var randStr = this.rand.toString().replace(/,/g, ""); //随机生成的验证码为数组形式,此处将其转为字符串并去掉中间相隔的逗号
        var codeStr = this.code; //用户输入的验证码
        if (randStr.toLowerCase() == codeStr.toLowerCase()) { //比较用户输入的与随机生成的验证码,不区分大小写
          this.$message.success('验证码正确,可正常登录')
        } else {
          this.$message.error('请输入正确的验证码');
        }
        //点击登录后的程序逻辑...
      },
      //是否记住密码
      rem() {
        //记住密码
        if (this.notRem == true) {
          this.notRem = false;
          this.isRem = true;
          //...
        } else {
          //不记住密码
          this.notRem = true;
          this.isRem = false;
          //...
        }
      },
      //忘记密码
      forget() {
        console.log("忘记密码");
        //忘记密码后的程序逻辑...
      },
      //绘制验证码
      drawCode() {
        //获取canvas画布
        var canvas = document.getElementById('verifyCanvas');
        var context = canvas.getContext('2d');
        //填充画布
        context.fillStyle = 'cornflowerblue';
        context.fillRect(0, 0, canvas.width, canvas.height);
        //创建渐变
        var gradient = context.createLinearGradient(0, 0, canvas.width, 0);
        gradient.addColorStop('0', 'yellow');
        gradient.addColorStop('0.5', 'black');
        gradient.addColorStop('1.0', 'red');
        //字体
        context.fillStyle = gradient;
        context.font = '30px Arial';
        //验证码的位置
        var x = [];
        var y = [];
        for (let i = 0; i < 4; i++) {
          this.rand[i] = this.codeList[Math.floor(Math.random() * this.codeList.length)];
          x[i] = i * 26 + 10;
          y[i] = 30;
          context.fillText(this.rand[i], x[i], y[i])
        }
        //绘制若干随机点
        for (let i = 0; i < 20; i++) {
          this.drawDot(canvas, context)
        }
        this.convertCanvasToImage(canvas);
        console.log(this.rand);
      },
      drawDot(canvas, context) {
        var px = Math.floor(Math.random() * canvas.width);
        var py = Math.floor(Math.random() * canvas.height);
        context.moveTo(px, py);
        context.lineTo(px + 1, py + 1);
        context.lineWidth = 0.2;
        context.stroke()
      },
      //绘制图片
      convertCanvasToImage(canvas) {
        document.getElementById('verifyCanvas').style.display = 'none';
        var image = document.getElementById('code_img');
        image.src = canvas.toDataURL('image/png');
        return image
      },
      //刷新验证码
      refreshCode() {
        var renew = document.getElementById('codeBox');
        var codeObj = document.getElementById('verifyCanvas');
        renew.removeChild(codeObj);
        var canvas = document.createElement('canvas');
        canvas.width = '112';
        canvas.height = '38';
        canvas.id = 'verifyCanvas';
        renew.appendChild(canvas);
        this.drawCode()
      }
    },
    mounted() {
      //调用绘制方法
      this.drawCode();
      this.refreshCode()
    }
  }
</script>
<style scoped>
  .login {
    background-color: #3a92a4;
    border: 2px solid black;
    border-radius: 10px;
    width: 5.5rem;
    height: 5.4rem;
    margin: auto;
  }
  .login > p {
    float: left;
    color: white;
    font-family: "Agency FB";
    font-size: 25px;
    font-weight: bolder;
    margin: 15px 15px;
  }
  /*表单区域*/
  .form {
    width: 80%;
    height: 90%;
    margin: 1.1rem auto;
  }
  .form .userAndPass {
    margin-bottom: 0.5rem;
  }
  /*验证码图片*/
  .form #code_img {
    position: absolute;
    top: 4.31rem;
    width: 1.1rem;
    height: 0.5rem;
    border: 1px solid #7EDDB4;
    left: 10.63rem;
    cursor: pointer;
    background-color: #E6F9F2;
    border-radius: 5px;
  }
  .userAndPass .txt /deep/ .el-input__inner {
    border-radius: 5px !important;
    height: 0.6rem;
  }
  /*记住密码*/
  .remember {
    cursor: pointer;
    width: 50%;
    display: flex;
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 1.29px;
    font-weight: 400;
    margin: auto;
    line-height: 0.2rem;
  }
  .remember img {
    width: 0.2rem;
    height: 0.2rem;
    vertical-align: middle;
    margin-right: 0.05rem;
  }
  /*登录按钮*/
  .btn {
    cursor: pointer;
    width: 65%;
    height: 0.6rem;
    text-align: center;
    position: relative;
    display: flex;
    font-family: SourceHanSansCN-Bold;
    font-size: 20px;
    color: #FFFFFF;
    letter-spacing: 2.85px;
    background-color: #4ec5f0;
    border-radius: 5px;
  }
  .btn p {
    margin: auto;
    line-height: 0.6rem;
  }
  .btn img {
    width: 0.15rem;
    height: 0.15rem;
    vertical-align: middle;
    margin-left: 0.4rem;
  }
  .forget {
    cursor: pointer;
    font-family: SourceHanSansCN-Regular;
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: 1.12px;
    text-align: right;
    margin-top: 0.09rem;
  }
</style>

相关文章
|
10天前
|
前端开发 JavaScript 开发者
水墨代码:前端川的诞生——在夏日阴雨中启航
【前端川】网站于农历五月初一(2024年6月6日)上线,融合水墨画与现代前端技术,呈现独特的水墨代码美学。创建者陈川分享技术心得与实战经验,网站特色包括水墨风格界面、技术深度解析及实战案例。在夏日雨中启航,"前端川"致力于为开发者提供灵感与帮助,探索前端技术的无限可能。
55 17
|
25天前
|
前端开发 JavaScript API
前端代码书写规范
前端代码规范提升项目可维护性和团队协作效率。关注项目命名清晰简洁、一致性,组件命名使用驼峰式且具描述性。JS遵循4空格缩进,分号结束语句,CSS按逻辑排序,HTML注重语义化。注释要功能性、文档化且简洁。遵循规范能减少错误,增强团队沟通。
86 3
|
4天前
|
前端开发 JavaScript 安全
微前端架构采用 TypeScript 提升开发效率和代码可靠性
【6月更文挑战第12天】微前端架构采用 TypeScript 提升开发效率和代码可靠性。TypeScript 的类型安全防止了微前端间的类型错误,智能提示与自动补全加速开发,重构支持简化代码更新。通过定义公共接口和使用 TypeScript 编写微前端,确保通信一致性与代码质量。在构建流程中集成 TypeScript,保证构建正确性。总之,TypeScript 在微前端架构中扮演关键角色,推荐用于大型前端项目。
22 4
|
12天前
|
前端开发 JavaScript
综合案例(前端代码练习):猜数字和表白墙
综合案例(前端代码练习):猜数字和表白墙
10 0
|
1月前
|
前端开发 安全 数据安全/隐私保护
详解前端登录流程:实现原理与最佳实践
详解前端登录流程:实现原理与最佳实践
|
1月前
|
前端开发 JavaScript Java
前端和Java验签以太坊钱包签名实现中心化登录
前端和Java验签以太坊钱包签名实现中心化登录
924 8
|
1月前
|
JSON 前端开发 搜索推荐
BoostCompass( http_server 模块 | 项目前端代码 )
BoostCompass( http_server 模块 | 项目前端代码 )
37 4
|
1月前
|
Dart 前端开发 Android开发
【Flutter前端技术开发专栏】Flutter中的平台特定代码实现
【4月更文挑战第30天】Flutter旨在实现跨平台移动应用开发,但有时需针对iOS或Android编写特定代码。平台通道是关键机制,允许Dart代码与原生代码交互。通过`MethodChannel`等实现跨平台通信,然后在iOS和Android上响应调用。条件编译则在编译时决定特定平台代码。本文展示了如何在Flutter中处理平台特定功能,包括示例代码和总结。
【Flutter前端技术开发专栏】Flutter中的平台特定代码实现
|
1月前
|
Dart 前端开发 Android开发
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互
【4月更文挑战第30天】本文探讨了如何在Flutter中集成和交互原生代码,以利用特定平台的API和库。当需要访问如蓝牙、特定支付SDK或复杂动画时,集成原生代码能提升效率和性能。集成方法包括:使用Platform Channel进行通信,借助现有Flutter插件,以及Android和iOS的Embedding。文中通过一个电池信息获取的例子展示了如何使用`MethodChannel`在Dart和原生代码间传递调用。这些技术使开发者能充分利用原生功能,加速开发进程。
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互
|
1月前
|
前端开发 开发者
【专栏】BEM(Block-Element-Modifier)是一种前端命名规范和架构方法,旨在创建清晰、可维护的代码结构。
【4月更文挑战第29天】BEM(Block-Element-Modifier)是一种前端命名规范和架构方法,旨在创建清晰、可维护的代码结构。它包括Block(独立功能单元)、Element(Block的子元素)和Modifier(表示状态或变体)。BEM的特点包括命名一致性、模块化设计、清晰结构和可复用性,适用于代码组织、样式管理、组件化开发和团队协作。虽然命名较长和学习成本是其局限性,但BEM在提升代码质量和效率方面具有显著优势,是前端开发的重要工具。

热门文章

最新文章