前言：
作为前端开发，相信大家都遇到过这样的问题？绝大多数的pc项目都是需要登录，忘记密码的。功能很简单，但是有那么一些小小的问题。当我们将项目部署到服务上后，点击登录，浏览器会提示记住密码。作为用户，相信都是会记住的。但是问题来了，记住密码之后，密码会自动填充，鼠标点击密码框，还会出现下拉框让人选择，看着都没问题，但如果这个时候切换“忘记密码”，就会发现，忘记密码页面会自动填充之前浏览器记住的密码。网上有很多解决办法，但是并不能根本解决。在此，我总结了一下，分享给大家。

效果图

vue项目中

一、登录中可以显示和隐藏密码、可以自动填充密码、点击密码框可以下拉选择

<el-form-item prop="password">
  <el-input
    class="usr-input" 
    v-model.trim="loginForm.password"
    :type="flag?'text':'password'"
    auto-complete="off"
    placeholder="密码"
    @keyup.enter.native="handleLogin"
  >
    <i slot="prefix" icon-class="password" class="el-icon-key" />
    <i slot="suffix"
          :class="flag?'el-icon-unlock':'el-icon-lock'"
          style="margin-top:10px;cursor:pointer"
          @click="flag=!flag"></i>
  </el-input>
</el-form-item>

二、忘记密码中可以显示和隐藏密码、不可以自动填充密码、点击密码框不可以下拉选择

<input type="text" style="position: absolute;z-index: -999;">
<input type="password" style="position: absolute;z-index: -999;">

<el-form-item prop="newPass">
  <el-input
    class="usr-input pass-show" 
    v-model.trim="passForm.newPass"
    :class="flag1?'unpass-show':'pass-show'"
    auto-complete="off"
    placeholder="请输入新密码"
    @keyup.enter.native="confirmPass"
  >
    <i slot="prefix" icon-class="password" class="el-icon-key unpass-show" />
    <i slot="suffix"
              class="unpass-show"
              :class="flag1?'el-icon-unlock':'el-icon-lock'"
              style="margin-top:10px;cursor:pointer"
              @click="flag1=!flag1"></i>
  </el-input>
</el-form-item>
<el-form-item prop="okNewPass">
  <el-input
    class="usr-input" 
    v-model.trim="passForm.okNewPass"
    :class="flag2?'unpass-show':'pass-show'"
    auto-complete="off"
    placeholder="请确认新密码"
    @keyup.enter.native="confirmPass"
  >
    <i slot="prefix" icon-class="password" class="el-icon-key unpass-show" />
    <i slot="suffix"
              class="unpass-show"
              :class="flag2?'el-icon-unlock':'el-icon-lock'"
              style="margin-top:10px;cursor:pointer"
              @click="flag2=!flag2"></i>
  </el-input>
</el-form-item>

三、以下完整代码

<template>
  <div class="login-bg">
    <div :class="isForgetPass?'login-pass':'login'">
      <el-form v-if="!isForgetPass" ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
        <h3 class="title Size20">某某系统</h3>
        <el-form-item prop="username">
          <el-input 
            class="usr-input" 
            v-model.trim="loginForm.username" 
            type="text" 
            auto-complete="off" 
            placeholder="账号"
            clearable
          >
            <i slot="prefix" class="el-icon-user" />
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            class="usr-input" 
            v-model.trim="loginForm.password"
            :type="flag?'text':'password'"
            auto-complete="off"
            placeholder="密码"
            @keyup.enter.native="handleLogin"
          >
            <i slot="prefix" icon-class="password" class="el-icon-key" />
            <i slot="suffix"
                  :class="flag?'el-icon-unlock':'el-icon-lock'"
                  style="margin-top:10px;cursor:pointer"
                  @click="flag=!flag"></i>
          </el-input>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            style="width:100%;height:38px"
            @click.native.prevent="handleLogin"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button size="medium" type="text" style="padding:0" @click="goForgetPass">
            忘记密码？
          </el-button>
        </el-form-item>
      </el-form>
      <el-form v-else ref="passForm" :model="passForm" :rules="passRules" class="login-form">
        <h3 class="title Size20">忘记密码</h3>
        <input type="text" style="position: absolute;z-index: -999;">
        <input type="password" style="position: absolute;z-index: -999;">
        <el-form-item prop="phone">
          <el-input 
            class="usr-input" 
            v-model.trim="passForm.phone" 
            type="text" 
            auto-complete="off" 
            placeholder="请输入手机号"
          >
            <i slot="prefix" class="el-icon-mobile" />
          </el-input>
        </el-form-item>
        <el-form-item prop="code" style="width:100%;">
          <el-input
            style="width:60%;height:38px"
            class="usr-input" 
            v-model.trim="passForm.code"
            auto-complete="off"
            placeholder="请输入验证码"
            @keyup.enter.native="confirmPass"
          >
            <i slot="prefix" class="el-icon-key" />
          </el-input>
          <el-button
            :disabled="number?true:false"
            size="medium"
            type="primary"
            style="width: calc(40% - 6px);height:38px"
            @click.native.prevent="getCode"
          >
            <span>获取验证码</span>
            <span v-if="number">{{number}}</span>
          </el-button>
        </el-form-item>
        <el-form-item prop="newPass">
          <el-input
            class="usr-input pass-show" 
            v-model.trim="passForm.newPass"
            :class="flag1?'unpass-show':'pass-show'"
            auto-complete="off"
            placeholder="请输入新密码"
            @keyup.enter.native="confirmPass"
          >
            <i slot="prefix" icon-class="password" class="el-icon-key unpass-show" />
            <i slot="suffix"
                      class="unpass-show"
                      :class="flag1?'el-icon-unlock':'el-icon-lock'"
                      style="margin-top:10px;cursor:pointer"
                      @click="flag1=!flag1"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="okNewPass">
          <el-input
            class="usr-input" 
            v-model.trim="passForm.okNewPass"
            :class="flag2?'unpass-show':'pass-show'"
            auto-complete="off"
            placeholder="请确认新密码"
            @keyup.enter.native="confirmPass"
          >
            <i slot="prefix" icon-class="password" class="el-icon-key unpass-show" />
            <i slot="suffix"
                      class="unpass-show"
                      :class="flag2?'el-icon-unlock':'el-icon-lock'"
                      style="margin-top:10px;cursor:pointer"
                      @click="flag2=!flag2"></i>
          </el-input>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button
            :loading="loadingPass"
            size="medium"
            type="primary"
            style="width:100%;height:38px"
            @click.native.prevent="confirmPass"
          >
            <span v-if="!loadingPass">确 定</span>
            <span v-else>确 定 ...</span>
          </el-button>
        </el-form-item>
        <el-form-item style="text-align:center">
          <el-button
            size="medium" type="text" style="padding:0"
            @click.native.prevent="goBack"
          >
            <i class="el-icon-arrow-left"></i>
            <span>返回登录</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {getCode,setCode,removeCode} from "./auth.js"
export default {
  name: "Login",
  data() {
    var certificatesCode=(rule, value, callback) => {
      if(value!='' && value!=null){
        if(value == this.codeValue) {
          callback();
        }else {
          callback("验证码不正确");
        }
      }else {
        callback('请输入您的验证码');
      }
    };
    var certificatesNewCode=(rule, value, callback) => {
      if(value!='' && value!=null){
        if(value == this.passForm.newPass) {
          callback();
        }else {
          callback("密码不一致");
        }
      }else {
        callback('请确认新密码');
      }
    };
    return {
      isForgetPass:false,
      flag:false,
      loginForm: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" }
        ],
      },
      loading: false,


      flag1:false,
      flag2:false,
      passForm: {
        phone: "",
        code: "",
        newPass:"",
        okNewPass:"",
      },
      codeValue:getCode()==undefined?null:getCode(),
      passRules: {
        phone: [
          { required: true, trigger: "blur", message: "请输入您的手机号" },
          {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '手机号码格式不正确',
            trigger: 'blur'
          }
        ],
        code: [
          { required: true, trigger: "blur", message: "请输入您的验证码" },
          {
            required: true,
            validator: certificatesCode,
          }
        ],
        newPass:[
          { required: true, trigger: "blur", message: "请输入新密码" }
        ],
        okNewPass:[
          { required: true, trigger: "blur", message: "请确认新密码"},
          {
            required: true,
            validator: certificatesNewCode,
          }
        ]
      },
      loadingPass: false,
      number:null,
      timer:null,
    };
  },
  beforeDestroy(){
    this.clearTimeouts()
  },
  methods: {
    //----------------------------------------------登录部分-------------------------------------------

    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.clickLogin()
        }
      });
    },
    clickLogin() {
     //接口
     let that = this
     setTimeout(()=>{
      that.loading = false
      this.$message.success('登录成功');
      this.resetLogin()
     },2000)
    },
    goForgetPass() {
      this.isForgetPass = true
      this.resetPass()
    },
    resetLogin() {
      this.loginForm = {
        username: "",
        password: "",
      }
      this.$nextTick(()=>{
        if (this.$refs.loginForm) {
          this.$refs.loginForm.resetFields();
        }
      })
    },


    //----------------------------------------忘记密码部分----------------------------------------------

    
    getCode() {
      this.$refs.passForm.validateField('phone',(phoneError) => {
        if(phoneError) {
          return false
        }else{
          // codeInfo({phone:this.passForm.phone}).then(res=>{
            // if(res.data.code == 0){
              // this.codeValue = res.data.data.verificationCode
              this.codeValue = '123456'//后台返回验证码应该是给了加密，此处需做解密处理，请根据个人具体情况进行修改
                                       //存储验证码(一般有时效限制，大多是5分钟有效，可存储cookie，设置存储时长)，
                                       //与手机获取的验证码进行对比，以此判断验证码是否正确
              setCode(this.codeValue)
              setTimeout(()=>{ //多加了一层判断，设置了一个定时器
                if(getCode()) {
                  removeCode()
                }
              },300000)

              this.number = 60
              this.downTimes()
            // }else{
            //   this.clearTimeouts()
            //   this.$message.error(res.data.msg)
            // }
          // }).catch(error=>{
          //   this.clearTimeouts()
          // })
        } 
      })
    },
    downTimes() {
      let _this = this
      this.timer = setTimeout(()=>{
        if(this.number>0) {
          _this.number--
          this.downTimes()
        }else{
          _this.number = null
          this.clearTimeouts()
        }
      },1000)
    },
    clearTimeouts(){
      clearTimeout(this.timer)
      this.timer = null
    },
    confirmPass() {
      this.$refs.passForm.validate(valid => {
        if (valid) {
          this.loadingPass = true;
          let that = this
          setTimeout(()=>{
            that.loadingPass = false
            that.isForgetPass = false
          },2000)
        }
      });
    },
    goBack() {
      this.isForgetPass = false
      this.resetLogin()
    },
    resetPass() {
      this.passForm={
        phone: "",
        code: "",
        newPass:"",
        okNewPass:"",
      }
      this.$nextTick(()=>{
        if (this.$refs.passForm) {
          this.$refs.passForm.resetFields();
        }
      })
    }
  }
};
</script>

<style scoped>
.login-bg{
  background-color: rgb(86, 117, 221);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.login {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 6px;
  height: 340px;
  width: 400px;
}
.login-pass{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 6px;
  height: 450px;
  width: 400px;
}
.login-left{
  width: 230px;
  height: 100%;
  float:left;
}
.login-left>img{
  width: 100%;
  height: 100%;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  float:left;
  width: 400px;
  padding: 25px;
  margin-top: 15px;
}
.pass-show{
  -webkit-text-security:disc;
  -moz-text-security:disc;
  -ms-text-security:disc;
  -o-text-security:disc; 
}
.unpass-show{
  -webkit-text-security:none;
  -moz-text-security:none;
  -ms-text-security:none;
  -o-text-security:none; 
}
</style>
<style>
.usr-input .el-input__inner{
  height: 40px!important;
  line-height: 40px!important;
}
.usr-input .el-input__prefix{
  height: 40px!important;
  line-height: 40px!important;
}
</style>

三、auth.js

需要引入 cookie.js

npm install js-cookie --save

import Cookies from 'js-cookie'

const CodeKey = 'code'

export function getCode() {
  return Cookies.get(CodeKey)
}

export function setCode(code) {
  var millisecond = new Date().getTime();
  var expiresTime = new Date(millisecond + 60 * 1000 * 5);
  return Cookies.set(CodeKey, code,{expires:expiresTime})
}

export function removeCode() {
  return Cookies.remove(CodeKey)
}

四、注：如若引用本文内容，请注明出处。