element ui滑动登录,密码强度提示

这篇具有很好参考价值的文章主要介绍了element ui滑动登录,密码强度提示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

我们知道验证码的目的 是为了验证到底是人还是机器。
我这里写的只是模仿了样式,并没有进行那些复杂的操作,所以并不安全(不能判断人还是机器),下面看效果:

element ui滑动登录,密码强度提示

 

 element ui滑动登录,密码强度提示

 

element ui滑动登录,密码强度提示

 

 一、新建文件logi.vue,把密码强度和拖动滑块加入form表单中,代码如下:


            <div class="progress-bar_wrap">
              <password-strength v-model="loginForm.password" style="padding-top: 10px;" />
            </div>

            <el-form-item prop="isLock">
              <slider-verify-code v-model="loginForm.isLock" @change="handlerLock" />
            </el-form-item>

            <!-异常信息展示-->  

             <div style="margin-bottom: 10px;">
              <el-alert
                id="account_error_message"
                center
                show-icon
                type="error"
              />
            </div>

2,密码强度和拖动组件代码如下:

  密码强度组件:

  

<template>
  <div id="container" style="margin-bottom: 16px">
    <el-row>
      <el-col :span="6" :offset="1">
        <el-progress
          :percentage="onePercentage"
          :color="oneCustomColors"
          :format="oneFormat"
          :stroke-width="3"
        />
      </el-col>
      <el-col :span="6" :offset="1">
        <el-progress
          :percentage="twoPercentage"
          :color="twoCustomColors"
          :format="twoFormat"
          :stroke-width="3"
        />
      </el-col>
      <el-col :span="6" :offset="1">
        <el-progress
          :percentage="ThreePercentage"
          :color="ThreeCustomColors"
          :format="ThreeFormat"
          :stroke-width="3"
        />
      </el-col>
      <el-col :span="2" :offset="1" style="line-height: 15px;">
        {{ content }}
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'PasswordStrength',
  model: {
    event: 'change',
    prop: 'passwordStr'
  },
  props: {
    // 密码
    passwordStr: {
      type: [String, Boolean, Number, Object],
      required: true,
      default: ''
    }
  },
  data() {
    return {
      content: '',
      onePercentage: 0,
      twoPercentage: 0,
      ThreePercentage: 0,
      oneCustomColors: [
        { color: '#f56c6c', percentage: 100 }
      ],
      twoCustomColors: [
        { color: '#e6a23c', percentage: 100 }
      ],
      ThreeCustomColors: [
        { color: '#67c23a', percentage: 100 }
      ]
    }
  },
  watch: {
    passwordStr(newValue) {
      const mode = this.checkPasswordStrength(newValue)
      // 逻辑处理
      this.handelPasswordPercent(mode)
    }
  },
  mounted() {
    this.setPasswordStr(this.passwordStr)
  },
  methods: {
    oneFormat() {
      return ''
    },
    twoFormat() {
      return ''
    },
    ThreeFormat() {
      return ''
    },
    // 密码强度验证
    checkPasswordStrength(value) {
      let mode = 0
      // 正则表达式验证符合要求的
      if (value.length < 1) return mode
      if (/\d/.test(value)) mode++ // 数字
      if (/[a-z]/.test(value)) mode++ // 小写
      if (/[A-Z]/.test(value)) mode++ // 大写
      if (/\W/.test(value)) mode++ // 特殊字符
      return mode
    },
    setPasswordStr(newValue) {
      const mode = this.checkPasswordStrength(newValue)
      this.handelPasswordPercent(mode)
    },
    handelPasswordPercent(mode) {
      // 逻辑处理
      switch (mode) {
        // 初始化状态
        case 0:
          this.content = ''
          this.onePercentage = 0
          this.twoPercentage = 0
          this.ThreePercentage = 0
          break
        case 1:
          this.content = '弱'
          this.onePercentage = 100
          this.twoPercentage = 0
          this.ThreePercentage = 0
          break
        case 2:
          this.content = '中'
          this.onePercentage = 100
          this.twoPercentage = 100
          this.ThreePercentage = 0
          break
        case 3:
          this.content = '中'
          this.onePercentage = 100
          this.twoPercentage = 100
          this.ThreePercentage = 0
          break
        default:
          this.content = '高'
          this.onePercentage = 100
          this.twoPercentage = 100
          this.ThreePercentage = 100
          break
      }
    }
  }
}
</script>

<style>
.el-progress__text {
  display: none;
}

.el-progress-bar {
  padding-right: 0px;
  margin: 0px;
}
</style>

拖动滑块 组件代码:

<template>
  <div class="drag" :style="style">
    <div class="background" />
    <div class="text shadow" onselectstart="return false" :style="{ color: textColor }">
      <slot name="content">
        {{ content }}
      </slot>
    </div>
    <div class="slider" :style="{height,width:sliderWidth}">
      <slot v-if="icon" name="icon">
        <i :class="icon" />
      </slot>
      <slot v-else name="icon">
        >>
      </slot>
    </div>
  </div>
</template>

<script>
const debounce = (function() {
  let timer = 0
  return function(callback, ms) {
    clearTimeout(timer)
    timer = setTimeout(callback, ms)
  }
})()

export default {
  name: 'SliderVerifyCode',
  model: {
    event: 'change',
    prop: 'isLock'
  },
  props: {
    isLock: { // 解锁状态
      type: [String, Boolean, Number, Object],
      required: true,
      default: false
    },
    icon: { // 滑块图标
      type: [String],
      default: 'el-icon-d-arrow-right'
    },
    activeValue: { // 滑块解锁后的值
      type: [String, Boolean, Number, Object],
      default: true
    },
    inactiveValue: { // 滑块解锁前的值
      type: [String, Boolean, Number, Object],
      default: false
    },
    content: { // 滑块的文字
      type: [String],
      default: '请向右拖动滑块'
    },
    height: { // 高度
      type: [String],
      default: '40px'
    },
    sliderWidth: { // 滑块宽度
      type: [String],
      default: '40px'
    },
    background: { // 高度
      type: [String],
      default: '#e8e8e8'
    },
    textColor: { // 滑块的文字颜色
      type: [String],
      default: '#777'
    }
  },
  computed: {
    style() {
      const { height, background } = this
      return { height, 'line-height': height, background }
    },
    resize() {
      return document.body.clientWidth
    }
  },
  watch: {
    isLock(data) { // 重置样式
      !data && this.init()
    }
  },
  mounted() {
    this.init()
    window.onresize = () => {
      debounce(() => {
        this.init()
      }, 120)
    }
  },
  methods: {
    /**
     * 定义一个获取DOM元素的方法-选择器
     */
    selector(selector) {
      return document.querySelector(selector)
    },
    /**
     * 初始化
     */
    init() {
      const box = this.selector('.drag') // 容器
      const background = this.selector('.background') // 背景
      const text = this.selector('.text') // 文字
      const slider = this.selector('.slider')// 滑块
      const distance = (box === null ? 0 : box.offsetWidth - slider.offsetWidth)// 滑动成功的宽度(距离)
      let success = this.inactiveValue// 是否通过验证的标志
      if (slider === null) return
      // 初始化的时候 清除所有属性
      slider.style.transition = null
      background.style.transition = null
      slider.style.left = 0 + 'px'
      background.style.width = 0 + 'px'
      text.innerHTML = this.content
      slider.innerHTML = '<i class="el-icon-d-arrow-right"></i>'
      slider.style.color = '#3fcd26'
      // 二、给滑块注册鼠标按下事件
      slider.onmousedown = (event) => {
        // 1.鼠标按下之前必须清除掉后面设置的过渡属性
        slider.style.transition = null
        background.style.transition = null
        // 说明:clientX 事件属性会返回当事件被触发时,鼠标指针向对于浏览器页面(或客户区)的水平坐标。
        // 2.当滑块位于初始位置时,得到鼠标按下时的水平位置
        const ev = event || window.event
        const downX = ev.clientX
        // 三、给文档注册鼠标移动事件
        document.onmousemove = (e) => {
          const evt = e || window.event// 是为了更好的兼容IE浏览器和非ie浏览器。在ie浏览器中,window.event是全局变量,在非ie中,就需要自己传入一个参数来获取event啦,所以就有了var e = e||window.event
          // 1.获取鼠标移动后的水平位置
          const moveX = evt.clientX
          // 2.得到鼠标水平位置的偏移量(鼠标移动时的位置 - 鼠标按下时的位置)
          let offsetX = moveX - downX
          // 3.在这里判断一下:鼠标水平移动的距离 与 滑动成功的距离 之间的关系
          if (offsetX > distance) {
            offsetX = distance// 如果滑过了终点,就将它停留在终点位置
          } else if (offsetX < 0) {
            offsetX = 0// 如果滑到了起点的左侧,就将它重置为起点位置
          }
          // 4.根据鼠标移动的距离来动态设置滑块的偏移量和背景颜色的宽度
          slider.style.left = offsetX + 'px'
          background.style.width = offsetX + 'px'
          // 如果鼠标的水平移动距离 = 滑动成功的宽度
          if (offsetX == distance) {
            // 1.设置滑动成功后的样式
            text.innerHTML = '验证成功'
            text.style.color = '#53C300'
            slider.innerHTML = '<i class="el-icon-success"></i>'
            slider.style.color = '#53C300'
            // 2.设置滑动成功后的状态
            success = this.activeValue
            // 成功后,清除掉鼠标按下事件和移动事件(因为移动时并不会涉及到鼠标松开事件)
            slider.onmousedown = null
            document.onmousemove = null
            // 3.成功解锁后的回调函数
            setTimeout(() => {
              this.$emit('change', this.activeValue)
            }, 100)
          }
        }
        // 四、给文档注册鼠标松开事件
        document.onmouseup = () => {
          // 如果鼠标松开时,滑到了终点,则验证通过
          if (success == this.activeValue) return true
          // 反之,则将滑块复位(设置了1s的属性过渡效果)
          slider.style.left = 0
          background.style.width = 0
          slider.style.transition = 'left 1s ease'
          background.style.transition = 'width 1s ease'
          // 只要鼠标松开了,说明此时不需要拖动滑块了,那么就清除鼠标移动和松开事件。
          document.onmousemove = null
          document.onmouseup = null
        }
      }
      /* 移动端 */
      // 二、给滑块注册鼠标按下事件
      slider.ontouchstart = (event) => {
        const touch = event.changedTouches[0]
        // 1.鼠标按下之前必须清除掉后面设置的过渡属性
        slider.style.transition = null
        background.style.transition = null
        // 说明:clientX 事件属性会返回当事件被触发时,鼠标指针向对于浏览器页面(或客户区)的水平坐标。
        // 2.当滑块位于初始位置时,得到鼠标按下时的水平位置
        const downX = touch.pageX
        // 三、给文档注册鼠标移动事件
        document.ontouchmove = (e) => {
          const tev = e.changedTouches[0]
          // 1.获取鼠标移动后的水平位置
          const moveX = tev.pageX
          // 2.得到鼠标水平位置的偏移量(鼠标移动时的位置 - 鼠标按下时的位置)
          let offsetX = moveX - downX
          // 3.在这里判断一下:鼠标水平移动的距离 与 滑动成功的距离 之间的关系
          if (offsetX > distance) {
            offsetX = distance// 如果滑过了终点,就将它停留在终点位置
          } else if (offsetX < 0) {
            offsetX = 0// 如果滑到了起点的左侧,就将它重置为起点位置
          }
          // 4.根据鼠标移动的距离来动态设置滑块的偏移量和背景颜色的宽度
          slider.style.left = offsetX + 'px'
          background.style.width = offsetX + 'px'
          // 如果鼠标的水平移动距离 = 滑动成功的宽度
          if (offsetX == distance) {
            // 1.设置滑动成功后的样式
            text.innerHTML = '验证成功'
            text.style.color = '#53C300'
            slider.innerHTML = '&radic;'
            slider.style.color = '#53C300'
            // 2.设置滑动成功后的状态
            success = this.activeValue
            // 成功后,清除掉鼠标按下事件和移动事件(因为移动时并不会涉及到鼠标松开事件)
            slider.ontouchstart = null
            document.ontouchmove = null
            // 3.成功解锁后的回调函数
            setTimeout(() => {
              this.$emit('change', this.activeValue)
              // console.log('解锁成功');
            }, 100)
          }
        }
        // 四、给文档注册鼠标松开事件
        document.ontouchend = () => {
          // 如果鼠标松开时,滑到了终点,则验证通过
          if (success == this.activeValue) return true
          // 反之,则将滑块复位(设置了1s的属性过渡效果)
          slider.style.left = 0
          background.style.width = 0
          slider.style.transition = 'left 1s ease'
          background.style.transition = 'width 1s ease'
          // 只要鼠标松开了,说明此时不需要拖动滑块了,那么就清除鼠标移动和松开事件。
          document.ontouchmove = null
          document.ontouchend = null
        }
      }
    }
  }
}

</script>
<style scoped lang="scss">
* {
  margin: 0px;
  padding: 0px;
  font-family: "微软雅黑";
  box-sizing: border-box;
}

.drag {
  height: 2.5rem;
  line-height: 2.5rem;
  background-color: #e8e8e8;
  position: relative;
  margin: 0 auto;
  border-radius: 3px;
}

.background {
  width: 2.5rem;
  height: 100%;
  position: absolute;
  background-color: #53C300;
  border-radius: 3px 0 0 3px;
}

.text {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  user-select: none;
}

.slider {
  width: 2.5rem;
  height: 2.375rem;
  position: absolute;
  border: 1px solid #ccc;
  cursor: move;
  font-family: "宋体";
  text-align: center;
  background-color: #fff;
  user-select: none;
  color: #666;
}

.shadow {
  text-align: center;
  background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.2, #5d5d5d),
    color-stop(.4, #6d6d6d), color-stop(.5, white), color-stop(.6, #6d6d6d), color-stop(.8, #5d5d5d), color-stop(1, #4d4d4d));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: animate 3s infinite;
}

@-webkit-keyframes animate {
  from {
    background-position: -80px;
  }
  to {
    background-position: 80px;
  }
}

@keyframes animate {
  from {
    background-position: -80px;
  }
  to {
    background-position: 80px;
  }
}
</style>

把以上2个组件引入到form表单里面。在表单提交的时候在validate里面验证即可:

rules: {
        isLock: [
          { validator: checkStatus, trigger: 'blur' }
        ]
      },


验证器的代码如下:

const checkStatus = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('滑动失败'))
      } else {
        if (this.loginForm.user=== '' || this.loginForm.password === '' ||
            !this.loginForm.user|| !this.loginForm.password) {
          setTimeout(() => {
            this.loginForm.isLock = false
            this.$refs.loginForm.validateField('user')
            this.$refs.loginForm.validateField('password')
            return callback(new Error('登录失败'))
          }, 1)
        }
        callback()
      }

注意的是如果验证失败,滑动条需要复原:

在你的表单提交方法里面验证失败加上下面的代码:

把失败的消息message 返回显示

$('#account_error_message').css('display', '')
$('#account_error_message .el-alert__content').text(message )

在滑动到最右边后可以向服务器请求获取一个随机码,并验证后,在表单提交后进一步验证即可文章来源地址https://www.toymoban.com/news/detail-419209.html

到了这里,关于element ui滑动登录,密码强度提示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Linux服务器配置SSH免密码登录后,登录仍提示输入密码(一次真实的问题排查解决记录)

    我们知道两台Linux服务器机器之间如果使用ssh命令登录或scp/rsync命令传输文件每一次都需要输入用户名相对应的密码,如果要免密码,则需要对两台Linux服务器机器之间进行SSH互信。 虽然这是废话,也希望大家了解一下。 SSH(Secure Shell)是一种安全的传输协议,它可以让Lin

    2024年02月09日
    浏览(62)
  • element ui框架(登录窗口)

    【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】         前面说到了路由,有了这个功能,其实后面的工作就比较好开展了。一般来说,很多网页项目都是这样的,首先进入的是登录窗口,在输入用户名和密码之后,就可以进入主页面了。

    2023年04月14日
    浏览(46)
  • element ui-表头自定义提示框

    版本 “element-ui”: “^2.15.5”, 需求:鼠标悬浮到该列表头,显示提示框 代码

    2024年02月07日
    浏览(45)
  • Android Java判断密码强度 强度显示

    定风波 苏轼(宋) 三月七日,沙湖道中遇雨。雨具先去,同行皆狼狈,余独不觉。已而遂晴,故作此词。 莫听穿林打叶声,何妨吟啸且徐行。竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生。 料峭春风吹酒醒,微冷,山头斜照却相迎。回首向来萧瑟处,归去,也无风雨也无晴。

    2024年02月10日
    浏览(71)
  • S5720交换机登录提示初始密码存在安全风险

    客户每次登录输密码时,提示初始密码不安全,现在客户嫌麻烦想要去掉: Username:huawei Password: Warning: The initial password poses security risks. The password needs to be changed. Change now? [Y/N]: n Info: The max number of VTY users is 10, and the number       of current VTY users on line 

    2024年01月19日
    浏览(47)
  • 使用Element ui 编写登录页面

    执行命令安装npm i element-ui -S mian.js中 完整引入    1  css预处理使用的是sass,可能没有安装 2  svg图标在vue中的使用,可能没有安装 3  去除空格的工具函数 srcutilsvalidate.js

    2024年02月11日
    浏览(38)
  • VSCode 中Element UI 代码提示设置

    1、搜索 Element UI Snippets 插件 2、点击Install按钮 1、搜索 vue-helper 插件 2、点击Install按钮

    2024年02月11日
    浏览(38)
  • 关闭登录华为CE交换机时密码不安全的提示

    在项目实施过程中遇到,SSH华为CE交换机,初次SSH登录要求改密码,无法登录不到设备里面。 以下为遇到问题的显示: Warning: The initial password poses security risks. The password needs to be changed. Change now? [Y/N]: Error: The operation timed out. The server has disconnected with an error. Server message reads: A

    2024年02月08日
    浏览(48)
  • element-ui,使用message防止多次提示,全局配置可关闭提示

    情景:在我们使用message的时候每次操作成功,或者进行一些数据交互的时候会进行message提示,但是假如出现我们操作完成要异步继续进行其他操作,或者多次调用接口时这个时候一直提示对用户是很不友好的,我们只需要让他提示最后一次即可; 1:在untils文件夹下创建  o

    2024年02月16日
    浏览(49)
  • element-ui实现密码复杂度验证

    1、el-form中的rules属性,rules属性定义的是存放多个验证规则的数组formRules(这个数组是个人起的名字),el-form-item中的prop属性,对应的是formRules数组中的对应的规则名称,然后在el-input标签内,设置一个v-model双向数据绑定,以及其他的属性等。:model是绑定属性,置空 在规则

    2024年02月07日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包