前端案例：简易登录表单的制作，包括用户名、密码、随机验证码（代码完整(1)

关注

原创最新推荐文章于 2026-03-07 00:07:27 发布 787 阅读 AI 写同款· GEO 优化 ›

前端案例：简易登录表单的制作，包括用户名、密码、随机验证码（代码完整，复制即用）案例效果本案例基于 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 阅读详情

    <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>

收录于