精华内容
下载资源
问答
  • vue修改密码页面

    2021-09-26 09:39:20
    <template> <el-form class="login-box1" ref="loginForm" :model="loginForm" :rules="rules" ...修改密码</h3> <el-form-item label="原密码" prop="oldpassword"> .
    <template>
      <el-form
        class="login-box1"
        ref="loginForm"
        :model="loginForm"
        :rules="rules"
        label-width="100px"
      >
        <h3 class="login-title">修改密码</h3>
        <el-form-item label="原密码" prop="oldpassword">
          <el-input
            type="password"
            show-password
            auto-complete="off"
            placeholder="请输入原密码"
            v-model="loginForm.oldpassword"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input
            type="password"
            show-password
            auto-complete="off"
            placeholder="请设置新密码"
            v-model="loginForm.password"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password2">
          <el-input
            type="password"
            show-password
            auto-complete="off"
            placeholder="请确认新密码"
            v-model="loginForm.password2"
          ></el-input>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button type="primary" @click.native.prevent="handleLogin"
            >保存</el-button
          >
          <el-button @click="$refs['loginForm'].resetFields()">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
    
    <script>
    import { getSecondpwd, addSecondpwd, updateSecondpwd } from "@/api/self/login";
    import { praseStrEmpty } from "@/utils/ruoyi";
    
    export default {
      name: "reset",
      data() {
        const validateNewPassword = (rule, value, callback) => {
          if (value === this.loginForm.oldpassword) {
            callback(new Error("新密码不能与原密码相同!"));
          } else {
            callback();
          }
        };
        const validateNewPassword2 = (rule, value, callback) => {
          if (value !== this.loginForm.password) {
            callback(new Error("与新密码不一致!"));
          } else {
            callback();
          }
        };
        return {
          loginForm: {
            username: "",
            empNum: "",
            empName: "",
            oldpassword: "",
            password: "",
            password2: "",
          },
    
          // 表单校验
          rules: {
            oldpassword: [
              { required: true, message: "请输入原密码", trigger: "blur" },
            ],
            password: [
              { required: true, message: "请设置新密码", trigger: "blur" },
              { validator: validateNewPassword, trigger: "blur" },
            ],
            password2: [
              { required: true, message: "请确认新密码", trigger: "blur" },
              { validator: validateNewPassword2, trigger: "blur" },
            ],
          },
        };
      },
      created() {
        // this.getCookie()
      },
      methods: {
        /** 提交按钮 */
        handleLogin() {
          this.$refs.loginForm.validate().then((valid) => {
            if (valid) {
              let userId = this.$store.state.user.userid;
              this.loginForm.empNum = userId;
              getSecondpwd(userId)
                .then((res) => {
                  // debugger;
                  if (res.password == this.loginForm.oldpassword) {
                    if (praseStrEmpty(this.loginForm.empNum) != "")
                      updateSecondpwd(this.loginForm).then((response) => {
                        alert("修改成功");
                      });
                  } else {
                    alert("密码错误");
                  }
                })
                .catch(() => {});
            }
          });
        },
      },
    };
    </script>
    <style lang="scss">
    .user-account-key {
      width: 500px;
      margin: 100px auto;
    }
    .login-box1 {
      border: 1px solid #dcdfe6;
      width: 500px;
      height: 340px;
      margin: 180px auto;
      padding: 35px 35px 15px 35px;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      box-shadow: 0 0 25px #909399;
    }
    .login-title {
      text-align: center;
      margin: 0 auto 40px auto;
      color: #303133;
    }
    </style>
    /**
     * 通用js方法封装处理
     */
    // 转换字符串,undefined,null等转化为""
    export function praseStrEmpty(str) {
    	if (!str || str == "undefined" || str == "null") {
    		return "";
    	}
    	return str;
    }

    查询密码页面

    <template>
    <!-- <div v-if="reset1"><reset></reset></div> -->
      <div v-if="login1">
        <el-form ref="loginForm" :model="loginForm" :rules="rules"  class="login-box" @submit.native.prevent v-if="!isNew">
          <h3 class="login-title">请输入查询密码</h3>
          <el-form-item prop="password" >
            <el-input
              v-model="loginForm.password"
              type="password"
              auto-complete="off"
              placeholder="请输入查询密码"
              @keyup.enter.native="handleLogin"
            >
              <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
               @keyup.enter="loginenter"
            </el-input>
          </el-form-item>
    
          <el-form-item >
             <el-button type="primary" @click.native.prevent="handleLogin" style="float:right">确定</el-button>
             <!-- <el-button type="text" @click="resetpassword">文字按钮</el-button> -->
          </el-form-item>
        </el-form>
    
        <el-form ref="loginForm" :model="loginForm" :rules="firstRules"  class="login-box" @submit.native.prevent v-else>
          <h3 class="login-title">请输入查询密码</h3>
          <el-form-item prop="password" >
            <el-input
              v-model="loginForm.password"
              type="password"
              auto-complete="off"
              placeholder="首次登录需设置查询密码"
              @keyup.enter.native="handleLogin"
            >
              <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
              @keyup.enter="loginenter"
            </el-input>
          </el-form-item>
          <el-form-item prop="confirmPassword" >
            <el-input
              v-model="loginForm.confirmPassword"
              type="password"
              auto-complete="off"
              placeholder="请再次输入查询密码"
              @keyup.enter.native="handleLogin"
            >
              <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
              @keyup.enter="loginenter"
            </el-input>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" @click.native.prevent="handleFisrtLogin" style="float:right">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
        <div v-else>
        <salary></salary>
        </div>
    
    
    
    </template>
    
    <script>
    import { listSecondpwd, getSecondpwd, delSecondpwd, addSecondpwd, updateSecondpwd, exportSecondpwd } from "@/api/self/login";
    import Cookies from "js-cookie";
    import { encrypt, decrypt } from '@/utils/jsencrypt'
    import salary from './index.vue'
    import reset from '../reset/index.vue'
      export default {
        name: "Login",
        components:{
          salary,
          reset,
        },
        data() {
          const equalToPassword = (rule, value, callback) => {
            if (this.loginForm.password !== value) {
              callback(new Error("两次输入的密码不一致"));
            } else {
              callback();
            }
          };
          return {
            reset1:false,
            login1:true,
            loginForm: {
              username: "",
              empNum:"",
              empName:"",
              password: '',
              confirmPassword:'',
            },
    
            // 表单验证,需要在 el-form-item 元素中增加 prop 属性
            rules: {
              password: [
                {required: true, message: '密码不可为空', trigger: 'blur'}
              ],
            },
            firstRules: {
              password: [
                {required: true, message: '密码不可为空', trigger: 'blur'}
              ],
              confirmPassword: [
                { required: true, trigger: "blur", message: "请再次输入您的密码" },
                { required: true, validator: equalToPassword, trigger: "blur" }
              ]
            },
            isNew: true,
    
          }
        },
        created(){
            this.getCookie()
          this.handleIfFirst()
        },
        methods: {  
          loginenter() {
            console.log('哎呀,登录中...');
        },
        resetpassword(){
          this.reset1 = true
        },
          handleIfFirst () {
            let userId = this.$store.state.user.userid;
            getSecondpwd(userId).then(res => {
              if(res.isNew){
                this.isNew=true;
              }else {
                this.isNew=false
              }
            }).catch(() => {})
    
          },
          handleLogin () {
            this.$refs.loginForm.validate(valid => {
              if (valid) {
                this.loading = true;
                let userId = this.$store.state.user.userid;
                getSecondpwd(userId).then(res => {
                  if(res.isNew){
                    this.isNew=res.isNew;
                  }else {
                    this.isNew=false
                    if(res.password==this.loginForm.password){
                      this.login1=false
                    }else {
                      alert("密码错误")
                      }
                  }
                }).catch(() => {})
              }
            });
          },
          handleFisrtLogin () {
            this.loginForm.empNum=this.$store.state.user.userid
            this.loginForm.empName=this.$store.state.user.name
            //alert(this.loginForm.empNum)
            this.$refs.loginForm.validate(valid => {
              if (valid) {
                this.loading = true;
                addSecondpwd(this.loginForm).then(res => {
                  this.login1=false
                }).catch(() => {})
              }
            });
          },
          getCookie(){
           const username = Cookies.get('username')
          const password = Cookies.get('password')
          this.loginForm = {
            username: username === undefined ? this.loginForm.username : username,
            password: password === undefined ? this.loginForm.password : decrypt(password),
          }
          }
        }
      }
    </script>
    
    <style lang="scss" scoped>
      .login-box {
        border: 1px solid #DCDFE6;
        width: 500px;
        margin: 180px auto;
        padding: 35px 35px 15px 35px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        box-shadow: 0 0 25px #909399;
      }
      .login-title {
        text-align: center;
        margin: 0 auto 40px auto;
        color: #303133;
      }
    </style>
    

     '@/utils/jsencrypt'

    import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'
    
    // 密钥对生成 http://web.chacuo.net/netrsakeypair
    
    const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n' +
      'nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='
    
    const privateKey = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAqhHyZfSsYourNxaY\n' +
      '7Nt+PrgrxkiA50efORdI5U5lsW79MmFnusUA355oaSXcLhu5xxB38SMSyP2KvuKN\n' +
      'PuH3owIDAQABAkAfoiLyL+Z4lf4Myxk6xUDgLaWGximj20CUf+5BKKnlrK+Ed8gA\n' +
      'kM0HqoTt2UZwA5E2MzS4EI2gjfQhz5X28uqxAiEA3wNFxfrCZlSZHb0gn2zDpWow\n' +
      'cSxQAgiCstxGUoOqlW8CIQDDOerGKH5OmCJ4Z21v+F25WaHYPxCFMvwxpcw99Ecv\n' +
      'DQIgIdhDTIqD2jfYjPTY8Jj3EDGPbH2HHuffvflECt3Ek60CIQCFRlCkHpi7hthh\n' +
      'YhovyloRYsM+IS9h/0BzlEAuO0ktMQIgSPT3aFAgJYwKpqRYKlLDVcflZFCKY7u3\n' +
      'UP8iWi1Qw0Y='
    
    // 加密
    export function encrypt(txt) {
      const encryptor = new JSEncrypt()
      encryptor.setPublicKey(publicKey) // 设置公钥
      return encryptor.encrypt(txt) // 对数据进行加密
    }
    
    // 解密
    export function decrypt(txt) {
      const encryptor = new JSEncrypt()
      encryptor.setPrivateKey(privateKey) // 设置私钥
      return encryptor.decrypt(txt) // 对数据进行解密
    }
    
    

    在package.json中配置

      "dependencies": {
        "axios": "0.21.0",
        "element-ui": "2.15.5",
        "js-cookie": "2.2.1",
        "jsencrypt": "3.0.0-rc.1",
      },

     登录页面

    <template>
      <div class="login">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
          <h3 class="title">后台管理系统</h3>
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
              <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              auto-complete="off"
              placeholder="密码"
              @keyup.enter.native="handleLogin"
            >
              <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <!--<el-form-item prop="code" v-if="captchaOnOff">-->
            <!--<el-input-->
              <!--v-model="loginForm.code"-->
              <!--auto-complete="off"-->
              <!--placeholder="验证码"-->
              <!--style="width: 63%"-->
              <!--@keyup.enter.native="handleLogin"-->
            <!--&gt;-->
              <!--<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />-->
            <!--</el-input>-->
            <!--<div class="login-code">-->
              <!--<img :src="codeUrl" @click="getCode" class="login-code-img"/>-->
            <!--</div>-->
          <!--</el-form-item>-->
          <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
          <el-form-item style="width:100%;">
            <el-button
              :loading="loading"
              size="medium"
              type="primary"
              style="width:100%;"
              @click.native.prevent="handleLogin"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
            <div style="float: right;" v-if="register">
              <router-link class="link-type" :to="'/register'">立即注册</router-link>
            </div>
          </el-form-item>
        </el-form>
        <!--  底部  -->
        <div class="el-login-footer">
          <span>Copyright ©2019</span>
        </div>
      </div>
    </template>
    
    <script>
    import { getCodeImg } from "@/api/login";
    import Cookies from "js-cookie";
    import { encrypt, decrypt } from '@/utils/jsencrypt'
    
    export default {
      name: "Login",
      data() {
        return {
          codeUrl: "",
          cookiePassword: "",
          loginForm: {
            username: "",
            password: "",
            rememberMe: false,
            code: "",
            uuid: ""
          },
          loginRules: {
            username: [
              { required: true, trigger: "blur", message: "请输入您的账号" }
            ],
            password: [
              { required: true, trigger: "blur", message: "请输入您的密码" }
            ],
            code: [{ required: true, trigger: "change", message: "请输入验证码" }]
          },
          loading: false,
          // 验证码开关
          captchaOnOff: false,
          // 注册开关
          register: false,
          redirect: undefined
        };
      },
      watch: {
        $route: {
          handler: function(route) {
            this.redirect = route.query && route.query.redirect;
          },
          immediate: true
        }
      },
      created() {
        //this.getCode();
        this.getCookie();
        this.getSrc();
      },
      methods: {
        // getCode() {
        //   getCodeImg().then(res => {
        //     this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
        //     if (this.captchaOnOff) {
        //       this.codeUrl = "data:image/gif;base64," + res.img;
        //       this.loginForm.uuid = res.uuid;
        //     }
        //   });
        // },
        getCookie() {
          const username = Cookies.get("username");
          const password = Cookies.get("password");
          const rememberMe = Cookies.get('rememberMe')
          this.loginForm = {
            username: username === undefined ? this.loginForm.username : username,
            password: password === undefined ? this.loginForm.password : decrypt(password),
            rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
          };
        },
        handleLogin() {
          this.$refs.loginForm.validate(valid => {
            if (valid) {
              this.loading = true;
              if (this.loginForm.rememberMe) {
                Cookies.set("username", this.loginForm.username, { expires: 30 });
                Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
                Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
              } else {
                Cookies.remove("username");
                Cookies.remove("password");
                Cookies.remove('rememberMe');
              }
              let ifTest=process.env.VUE_APP_IF_TEST
                  this.$store.dispatch("Login", this.loginForm).then(() => {
                    this.$router.push({ path: this.redirect || "/" }).catch(()=>{
                      this.loading = false;
                    });
                  }).catch(() => {
                    this.loading = false;
                    if (this.captchaOnOff) {
                      this.getCode();
                    }
                  });
            }
          });
        },
        getSrc(){
          console.log("="+this.isSrc)
    
          this.isSrc=this.getQueryString("isSrc");
          console.log(this.isSrc)
    
        },
        getQueryString(name) { 
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
            var r = window.location.search.substr(1).match(reg); 
            if (r != null) return unescape(r[2]); return null; 
        } 
        
      }
    };
    </script>
    
    <style rel="stylesheet/scss" lang="scss">
    .login {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      background-image: url("../assets/images/login-background.jpg");
      background-size: cover;
    }
    .title {
      margin: 0px auto 30px auto;
      text-align: center;
      color: #707070;
    }
    
    .login-form {
      border-radius: 6px;
      background: #ffffff;
      width: 400px;
      padding: 25px 25px 5px 25px;
      .el-input {
        height: 38px;
        input {
          height: 38px;
        }
      }
      .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 2px;
      }
    }
    .login-tip {
      font-size: 13px;
      text-align: center;
      color: #bfbfbf;
    }
    .login-code {
      width: 33%;
      height: 38px;
      float: right;
      img {
        cursor: pointer;
        vertical-align: middle;
      }
    }
    .el-login-footer {
      height: 40px;
      line-height: 40px;
      position: fixed;
      bottom: 0;
      width: 100%;
      text-align: center;
      color: #fff;
      font-family: Arial;
      font-size: 12px;
      letter-spacing: 1px;
    }
    .login-code-img {
      height: 38px;
    }
    </style>
    

    展开全文
  • 主要为大家详细介绍了VUE实现密码验证与提示功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue 登录 + 记住密码 + 密码加密解密 使用crypto-js加解密 第一步,安装 npm install crypto-js 第二步,在你需要的vue组件内import import CryptoJS from “crypto-js”; 第三步,使用 // Encrypt 加密 var ...

    vue 记住密码 + 密码加密解密

    使用crypto-js加解密

    第一步,安装

    npm install crypto-js

    第二步,在你需要的vue组件内import

    import CryptoJS from “crypto-js”;

    第三步,使用

    // Encrypt 加密
    var cipherText = CryptoJS.AES.encrypt(
    "my message",
    "secretkey123"
    ).toString();
    console.log(cipherText)
    // Decrypt 解密
    var bytes = CryptoJS.AES.decrypt(cipherText, "secretkey123");
    var originalText = bytes.toString(CryptoJS.enc.Utf8);
    //打印一下
    console.log(originalText); // 'my message'
    

    记住密码
    实现原理是登录的时候,如果勾选了记住密码(把‘记住密码’状态保存到localstorage)就保存账号密码到cookies;
    之后进入登录页面的时候,判断是否记住了密码(从localstorage判断),如果记住密码则导出cookies到表单;
    其中保存使用setcookie方法,取出则使用getcookie方法。

    //设置cookie
    setCookie(portId, psw, exdays) {
    // Encrypt,加密账号密码
    var cipherPortId = CryptoJS.AES.encrypt(
    portId+'',
    "secretkey123"
    ).toString();
    var cipherPsw = CryptoJS.AES.encrypt(psw+'', "secretkey123").toString();
    console.log(cipherPortId+'/'+cipherPsw)//打印一下看看有没有加密成功
    
    var exdate = new Date(); //获取时间
    exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
    //字符串拼接cookie,为什么这里用了==,因为加密后的字符串也有个=号,影响下面getcookie的字符串切割,你也可以使用其他的符号。
    window.document.cookie =
    "currentPortId" +
    "==" +
    cipherPortId +
    ";path=/;expires=" +
    exdate.toGMTString();
    window.document.cookie =
    "password" +
    "==" +
    cipherPsw +
    ";path=/;expires=" +
    exdate.toGMTString();
    },
    //读取cookie
    getCookie: function() {
    if (document.cookie.length > 0) {
    var arr = document.cookie.split("; "); //这里显示的格式请根据自己的代码更改
    for (var i = 0; i < arr.length; i++) {
    var arr2 = arr[i].split("=="); //根据==切割
    //判断查找相对应的值
    if (arr2[0] == "currentPortId") {
    // Decrypt,将解密后的内容赋值给账号
    var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");
    this.currentPortId = bytes.toString(CryptoJS.enc.Utf8)-0;
    } else if (arr2[0] == "password") {
    // Decrypt,将解密后的内容赋值给密码
    var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");
    this.password = bytes.toString(CryptoJS.enc.Utf8);
    }
    }
    }
    },
    //清除cookie
    clearCookie: function() {
    this.setCookie("", "", -1);
    }
    

    最后需要在cerated 钩子函数内判断用户是否记住密码来执行相关的操作

    created() {
    //判断是否记住密码
    if (localStorage.getItem("rememberPsw") == 'true') {
    this.getCookie();
    }
    }
    

    登录

    login() {
    this.$http //请根据实际情况修改该方法
    .post(...)
    .then(res => {
    if (res.data.code == "success") {
    if (this.rememberPsw == true) {
    //判断用户是否勾选了记住密码选项rememberPsw,传入保存的账号currentPortId,密码password,天数30
    this.setCookie(this.currentPortId, this.password, 30);
    }else{
    this.clearCookie();
    }
    //这里是因为要在created中判断,所以使用了localstorage比较简单,当然你也可以直接根据cookie的长度or其他骚操作来判断有没有记住密码。
    localStorage.setItem("rememberPsw", this.rememberPsw);
    
    } else {}
    })
    .catch(err => {});
    },
    
    展开全文
  • vue 记住密码功能

    2020-12-31 10:30:40
    vue 记住密码功能 展示 html <van-checkbox v-model="isChecked" icon-size="16px" checked-color="#4188F2" shape="square">记住密码</van-checkbox> data isChecked: true, // 记住密码 ...

    vue 记住密码功能

    展示

    html

    <van-checkbox v-model="isChecked" icon-size="16px" checked-color="#4188F2" shape="square">记住密码</van-checkbox>

    data

    isChecked: true, // 记住密码

    created

    created () {
     this.getCookie()
    },
    
    methods
    // 设置cookie
                setCookie (name, pwd, exdays) {
                    var exdate = new Date()// 获取时间
                    exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays)// 保存的天数
                    // 字符串拼接cookie
                    window.document.cookie = 'userName' + '=' + name + ';path=/;expires=' + exdate.toGMTString()
                    window.document.cookie = 'userPwd' + '=' + pwd + ';path=/;expires=' + exdate.toGMTString()
                },
                // 读取cookie 将用户名和密码回显到input框中
                getCookie () {
                    if (document.cookie.length > 0) {
                        var arr = document.cookie.split('; ')// 这里显示的格式需要切割一下自己可输出看下
                        for (var i = 0; i < arr.length; i++) {
                            var arr2 = arr[i].split('=')// 再次切割
                            // 判断查找相对应的值
                            if (arr2[0] === 'userName') {
                                this.username = arr2[1]// 保存到保存数据的地方
                                // 其中unescape() 方法是将字符串进行编码,escape()方法是将字符串进行解码。
                            } else if (arr2[0] === 'userPwd') {
                                this.password = arr2[1]
                            }
                        }
                    }
                },
    // 点击登录按钮的时候,判断是否勾选了自动登录(记住密码),对cookie做相应操作
    if (this.isChecked) {
      // 传入账号名,密码,和保存天数14个参数
      this.setCookie(this.ruleForm.userName, this.ruleForm.password, 14)
    } else {
      // 如果没有选中自动登录,那就清除cookie
      this.setCookie('', '', -1) // 修改2值都为空,天数为负1天就好了
    }

     

    展开全文
  • vue输入密码组件 Vue密码3.x (vue-password 3.x) A Vue.js password input component that includes a toggle to show the password and a customizable strength meter. Vue.js密码输入组件,包括一个用于显示密码...

    vue输入密码组件

    Vue密码3.x (vue-password 3.x)

    A Vue.js password input component that includes a toggle to show the password and a customizable strength meter.

    Vue.js密码输入组件,包括一个用于显示密码的开关和一个可自定义的强度计。

    Please note, VuePassword 3.x removes support for the zxcvbn library. The library appears to no longer be maintained. If you would still like to use it, you can still pull in the library and pass the VuePassword value to it to calculate the strength. Examples coming soon.

    请注意,VuePassword 3.x删除了对zxcvbn库的支持。 该库似乎不再维护。 如果仍要使用它,您仍然可以拉入库并将VuePassword值传递给它以计算强度。 示例即将到来。

    安装 (Install)

    Install the package using npm.

    使用npm安装软件包。

    npm install --save vue-password

    The VuePassword component adds support for a toggle to hide and show the password as well as a meter to show the current strength of the password. This component does not automatically calculate the strength, however, a library like zxcvbn can be used to pass the strength values as props.

    VuePassword组件增加了对用于隐藏和显示密码的切换开关以及显示密码当前强度的仪表的支持。 该组件不会自动计算强度,但是,可以使用像zxcvbn这样的库将强度值作为prop传递。

    import VuePassword from 'vue-password';
    
    export default {
        ...
        components: {
            VuePassword,
        },
        ...
    };

    用法 (Usage)

    Use the props in your HTML and apply a v-model attribute for the password and any additional props for the desired configuration. The password input uses the $attrs attributes, so form validation props such as required, minlength, and maxlength will function on the input element. The following example shows how vue-password could be used in a registration form using Tailwind CSS.

    在HTML中使用道具,并为密码设置v-model属性,并为所需配置应用其他道具。 密码输入使用$ attrs属性,因此表单验证道具(例如required,minlength和maxlength)将在输入元素上起作用。 以下示例显示了如何使用Tailwind CSS在注册表单中使用vue-password。

    Java脚本 (Javascript)

    import Vue from 'vue'
    import VuePassword from 'vue-password'
    
    new Vue({
      el: '#app',
      components: {
        VuePassword
      },
      data {
        user: {
          email: '',
          password: ''
        }
      }
    })

    HTML (HTML)

    <form>
        <div class="mb-4">
            <label for="password">Password</label>
            <VuePassword
                v-model="password1"
                id="password1"
                :strength="strength"
                type="text"
            />
        </div>
    </form>

    道具 (Props)

    Use the following props to configure the password input.

    使用以下道具来配置密码输入。

    PropDefaultDescription
    classes'form-control'Set the classes for the input element. The default is the 'form-control' class used by Twitter Bootstrap. A string or array of classes can be passed in the prop.
    disableStrengthfalseDisable the password strength meter and messages.
    disableTogglefalseDisable the password input toggle to show/hide the password.
    strengthClasses['VuePassword--very-weak', 'VuePassword--weak', 'VuePassword--medium', 'VuePassword--good', 'VuePassword--great']Set the classes used to style the strength message and strength meter. This should be an array of five classes. The classes are applied depending on the current strength score of the password (0-4).
    strengthMessages['Very Weak Password', 'Weak Password', 'Medium Password', 'Strong Password' 'Very Strong Password']Set the messages that appear depending on the strength score of the password. This should be an array of five messages.
    Struts 默认 描述
    “形式控制” 设置输入元素的类。 默认值为Twitter Bootstrap使用的“ form-control”类。 字符串或类数组可以在prop中传递。
    disableStrength 禁用密码强度计和消息。
    disableToggle 禁用密码输入切换按钮以显示/隐藏密码。
    strengthClasses [“ VuePassword –非常弱”,“ VuePassword –弱”,“ VuePassword –中”,“ VuePassword –好”,“ VuePassword –很好”] 设置用于设置强度消息和强度计样式的类。 这应该是五个类的数组。 根据密码的当前强度得分(0-4)应用类别。
    strengthMessages [“非常弱密码”,“弱密码”,“中等密码”,“强密码”,“非常强密码”] 根据密码强度得分设置显示的消息。 这应该是五个消息的数组。

    大事记 (Events)

    The password input emits an input event to use with v-model. Other events are binded use v-on="listeners".

    密码输入发出一个输入事件以与v模型一起使用。 其他事件使用v-on =“ listeners”绑定。

    插槽 (Slots)

    Named slots can be used to change the layout of the password toggle, strength meter, and strength messages.

    命名的插槽可用于更改密码切换器,强度计和强度消息的布局。

    SlotScopeDescription
    password-input
    • strength: Strength value

    • type: Current element type ('password or text')

    • updatePassword: Method to update the password value.

    • value: Current password value

    Use this to replace the input element. The content provided by the slot must include an input field, preferably of type password.
    password-toggletoggle: Method to change the input type attribute from 'password' to 'type'Use this named slot to change the layout of the password toggle.
    password-hideUse this named slot to change the password hide icon.
    password-showUse this named slot to change the password show icon.
    strength-meter
    • strength: Strength value

    • strength-class: Current strength class

    • strength-classes: The array of strength classes

    • strength-message: Current strength message

    • strength-messages: The array of strength messages

    Use this named slot to change the layout of the password strength meter.
    插槽 范围 描述
    密码输入
    • 强度:强度值

    • 类型:当前元素类型(“密码或文本”)

    • updatePassword:更新密码值的方法。

    • 值:当前密码值

    使用它来替换输入元素。 插槽提供的内容必须包含一个输入字段,最好是password类型。
    密码切换 toggle:将输入类型属性从“密码”更改为“类型”的方法 使用此命名插槽更改密码切换器的布局。
    隐藏密码 使用此命名插槽更改密码隐藏图标。
    密码显示 使用此命名插槽更改密码显示图标。
    强度计
    • 强度:强度值

    • 强度等级:当前强度等级

    • 强度等级:强度等级的数组

    • strength-message:当前强度信息

    • 强度消息:强度消息的数组

    使用此命名插槽更改密码强度计的布局。

    示例:使用自定义输入 (Example: Use custom input)

    <VuePassword
        v-model="user.password"
    >
        <div
            v-slot:password-input="props"
            class="control has-icons-left"
        >
            <input
                class="input"
                type="password"
                placeholder="Text input"
                :value="props.value"
                @input="props.updatePassword"
            />
        </div>
    </VuePassword>

    自定义强度示例 (Custom Strength Example)

    HTML (HTML)

    <form>
        <label for="password">Password</label>
        <VuePassword
            v-model="user.password"
            :strength="score"
            @input="updateStrength"
        />
    </form>

    Java脚本 (Javascript)

    import VuePassword from 'vue-password'
    
    new Vue({
        el: '#app',
        components: {
            VuePassword,
        },
        data: {
            score: 0,
            user: {
                password: ''
            }
        },
        methods: {
            updateStrength(password) {
                /**
                 * The input event sends the current password and
                 * any included user inputs (email in this case).
                 *
                 * Calculate the score here either using a custom
                 * javascript library or a request to the server.
                 *
                 * The strength must be an integer between 0 and 4.
                 */
            }
        }
    });

    翻译自: https://vuejsexamples.com/a-vue-js-password-input-component-that-includes-a-toggle-to-show-the-password/

    vue输入密码组件

    展开全文
  • 本文通过实例代码给大家介绍了vue实现个人信息查看和密码修改功能,文中给大家补充介绍了vue实现密码显示隐藏切换功能,非常不错,具有一定的参考借鉴价值,感兴趣的朋友一起看看吧
  • vue.js修改密码表单

    2021-01-07 09:41:15
    修改密码</el-button> <div> <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="500px" top="30vh"> <el-form :model="form" :rules="rules" ref="form"> &l
  • vue实现修改密码(ant design of vue)1.效果图2.重要代码2.1输入框2.2输入框校验2.3键盘监听事件3.完整代码及详解 1.效果图 2.重要代码 2.1输入框 若是使用传统的密码框,怎么都阻止不了浏览器的提示。(详情参考...
  • Vue 通过修改input的类型,达到密码显示隐藏,还有图标的变化。 显示效果: html &lt;li&gt; &lt;input class="psd" :type="pwdType" placeholder="请输入新密码"...
  • el-dialog title="修改密码" :visible.sync="dialogFormVisible" class="updatepwdbox" :before-close="cancelform" :close-on-click-modal="false"> <el-form :model="pwddata" label-width="100px" status-...
  • data() { //此处即表单发送之前验证 let validateNewPassword = (rule, value, callback) => { if (value === this.form.password)... callback(new Error('新密码不能与原密码相同!')) } else { callback()...
  • 浏览器自动填充和记住密码行为是前端遇到最为头疼的问题之一,浏览器只要检查到password input框,就会匹配离他最近的text input框,autocomplete属性虽能解决自动填充的问题,但是也是支持有限,不能解决浏览器记住...
  • vue密码强度校验

    千次阅读 多人点赞 2019-08-19 13:21:52
    vue密码强度校验 可直接复制使用,根据自己所需再更改! <template> <div class="container"> <label style="margin-left:40px;">密码:</label> <input v-model="pwdee" id="inputValue...
  • v-model的实现需要在自定义组件中自定义一个inputvalue值,因为vue中的父子组件传递机制问题,在组件中直接修改props注入的key字段时,vue会给出错误。子组件中定义inputvalue字段,用于子组件中input元素的值的双向...
  • 一、在el-form(element ui中的form表单)中使用:rules=... * 测试密码是否满足条件,包括四种类型 */ export function validPassword(value) { const num = /^.*[0-9]+.*/ const low = /^.*[a-z]+.*/ const
  • vue 密码组件 简易密码表 (vue-simple-password-meter) Vue Simple Passwod Meter is a simple password checker written in vanilla js and extremly lightweight (3.2kb minified + Gzipped) Vue Simple Passwod ...
  • 今天写的一个新的需求就是给系统增加修改密码功能,前端也需要做一个校验。如下图: 新密码不能与旧密码相同 确认新密码要与上一次输入一致 实现如下: 首先用的是antd的formModal表单组件 <a-form-model ...
  • 需求:基于Element-UI和LayUI搭建的后台管理系统,除了有权限的管理员手动修改所有人的用户密码以外,需要添加一个自己能修改密码的功能。 效果图 1:添加修改密码 2:点击修改密码弹出el-dialog弹框 附上代码 1:...
  • vue 记住密码下次自动登录

    千次阅读 2020-02-22 12:50:55
    :checked="pasChecked" @click="changeChecked" hidden/> ...//修改2值都为空,天数为负1天就好了 }, }   点击下次自动登录,再点击登录时,会保存用户名及密码(7天)   
  • 2019独角兽企业重金招聘Python... self.$Message.error('修改密码失败,请重新修改!'); }) }else{ self.$Message.error('修改密码失败,请重新修改!'); } }, changePswCancel: function () { } ...
  • v-model的实现需要在自定义组件中自定义一个inputvalue值,因为vue中的父子组件传递机制问题,在组件中直接修改props注入的key字段时,vue会给出错误。子组件中定义inputvalue字段,用于子组件中input元素的值的双向...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,717
精华内容 6,686
关键字:

vue修改密码

vue 订阅