精华内容
下载资源
问答
  • 2021-08-19 12:33:30

    vue校验密码需输入 大小写字母,数字,特殊字符 四种包含任意三种:

    ```javascript
    /((^(?=.*[a-z])(?=.*[A-Z])(?=.*\W_)[\da-zA-Z\W_]{8,20}$)|(^(?=.*\d)(?=.*[A-Z])(?=.*\W_){8,20}$)|(^(?=.*\d)(?=.*[a-z])(?=.*\W_)[\da-zA-Z\W_]{8,20}$)|(^(?=.*\d)(?=.*[A-Z])[\da-zA-Z\W_]{8,20}$))/.test(value);
    //密码至少8位最多20位,大小写字母\数字\特殊字符四种中任意三种
    
    延伸知识点:
    /W:
    /d:
    
    
    更多相关内容
  • vue校验密码的三种写法

    千次阅读 2021-09-02 08:53:05
    在需要校验密码的vue文件内import引入validate.js中的validPassword函数 import { validPassword } from '@/utils/validate' 3.在需要校验密码的vue文件中的data定义校验函数,调用validPassword 函数 const ...

    一、在el-form(element ui中的form表单)中使用:rules=“rules” 实现

    1.在项目的src/utils文件夹下创建validate.js文件
    在这里插入图片描述
    validate.js文件中内容为:
    在这里插入图片描述

    /**
     * @param value
     * 测试密码是否满足条件,包括四种类型
     */
     export function validPassword(value) {
      const num = /^.*[0-9]+.*/
      const low = /^.*[a-z]+.*/
      const up = /^.*[A-Z]+.*/
      const spe = /^.*[^a-zA-Z0-9]+.*/
      const passLength = value.length > 5 && value.length < 21
      return num.test(value) && low.test(value) && up.test(value) && spe.test(value) && passLength
    }
    

    2.在需要校验密码的vue文件内import引入validate.js中的validPassword函数
    在这里插入图片描述

    import { validPassword } from '@/utils/validate'
    

    3.在需要校验密码的vue文件中的data定义校验函数,调用validPassword 函数
    在这里插入图片描述

    const validatePassword = (rule, value, callback) => {
          if (validPassword(value)) callback()
          else callback(new Error('密码6-20位,必须包含大写字母,小写字母,数字及特殊字符'))
        }
    

    4.在需要校验密码的vue文件中的form表单中写:rules=“rules”
    在这里插入图片描述
    5.在rules中通过validator: validatePassword使用自定义校验规则
    在这里插入图片描述

    password: [
              { required: true, trigger: "blur",validator: validatePassword},
            ],
    

    二、使用this.$prompt实现

    在这里插入图片描述

     /** 重置密码按钮操作 */
        handleResetPwd(row) {
          this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            closeOnClickModal: false,
            inputPattern: /^.*(?=.{6,20})(?=.*\d)(?=.*[A-Z]{1,})(?=.*[a-z]{1,})(?=.*[!@#$%^&*?\(\)]).*$/,
            inputErrorMessage: "'密码6-20位,必须包含大写字母,小写字母,数字及特殊字符'",
          }).then(({ value }) => {
              resetUserPwd(row.userId, value).then(response => {
                this.msgSuccess("修改成功,新密码是:" + value);
              });
            }).catch(() => {});
        },
    

    prompt() 弹出个输入框

    三、a-input(ant-design-vue)中使用

    前两步同一
    在这里插入图片描述

     <a-input
              placeholder="请输入新密码"
              type="password"
              v-decorator="['newPassword', {rules: [{required: true, message: '请输入新密码!'},{
                validator: validateToNextPassword,
              },]}]" />
    

    在这里插入图片描述

    validateToNextPassword (rule, value, callback) {
            if (validPassword(value)) callback()
            else callback(new Error('密码8-20位,必须包含大写字母,小写字母,数字及特殊字符'))
          }
    
    展开全文
  • vue校验密码强度

    需求:
    一、密码长度:
    5 分: 小于等于 4 个字符, 10 分: 5 到 7 字符 , 25 分: 大于等于 8 个字符
    二、字母:
    0 分: 没有字母, 10 分: 全都是小(大)写字母, 20 分: 大小写混合字母
    三、数字:
    0 分: 没有数字, 10 分: 1 个数字, 20 分: 大于等于 3 个数字
    四、符号:
    0 分: 没有符号, 10 分: 1 个符号, 25 分: 大于 1 个符号
    五、奖励:
    2 分: 字母和数字, 3 分: 字母、数字和符号, 5 分: 大小写字母、数字和符号
    最后的评分标准:
    = 90: 非常安全
    = 80: 安全(Secure)
    = 70: 非常强
    = 60: 强(Strong)
    = 50: 一般(Average)
    = 25: 弱(Weak)
    = 0: 非常弱

    核心代码:按照需求判断字符串的强度

    function checkPassword (str){
      // 第一步先判断各分类长度
      let num = 0;//数字
      let lowerCase = 0;//小写字母
      let upperCase = 0;//大写字母
      let special = 0;//特殊字符
      for (let i = 0; i < str. length; i++){
        let c = str.charCodeAt(i)
        if (c >= 48&& c <= 57){
          //数字
          num++;
        }else if (c >= 65 && c <= 90){
          //大写字母
          upperCase++;
        }else if (c = 97 && c <= 122){
          //小写字母
          lowerCase++;
        }else {
          special++;
        }
      }
      // 第二步 计算分数
      let wholeMark = 0
      let numMark = 0
      let caseMark = 0
      let specialMark = 0
      let reward = 0
      // 整长度分数
      if (str.length <= 4){
        wholeMark = 5
      }else if (str.length > 4 && str. length <=8){
        wholeMark = 10
      }else {
        wholeMark = 25
      }
      // 奖励分数
      if ((lowerCase || upperCase)&& num) {
        reward = 2
        if (special){
          reward = 3
          if (lowerCase && upperCase) {
            reward = 5
          }
        }
      }
      // 字母分数
      if (lowerCase || upperCase) {
        caseMark = 10
        if (lowerCase && upperCase){
          caseMark = 20
        }
      }
      // 数字分数
      if (num){
        numMark = 10
        if (num >= 3){
          numMark = 20
        }
      }
      // 符号分数
      if (special){
        specialMark = 10
        if (special > 1){
          specialMark = 25
        }
      }
      let totalMark = wholeMark + numMark + caseMark + specialMark + reward
      let strength = ''
      if (totalMark<25){ strength ='非常弱'
      }else if (totalMark >= 25 && totalMark < 50){strength ='弱'
      }else if (totalMark >= 50 && totalMark < 60){strength = '一般'
      }else if (totalMark >= 60 && totalMark < 70){strength ='强'
      }else if (totalMark >= 70 && totalMark < 80){strength = '非常强'
      }else if (totalMark >= 86 && totalMark < 90){strength = '安全'
      }else {strength ='非常安全'
      }
      return strength
    }
    

    执行测试:
    在这里插入图片描述

    借鉴博文:https://www.imooc.com/article/17470

    • 下面是在页面上显示强度条的内容

    html部分

    
    <input value="password" @change="onPasswordChange"></input>
    
    <div>
    <span :class="(password &&(isOne||isTwo||isThree||isFour||isFive||isSix||isSeven))?'colorRed' : 'colorInit'"></span>
    <span :class="(isTwo||isThree||isFour||isFive||isSix||isSeven)? 'colorRed : 'colorInit'"></span>
    <span :class="(isThree||isFour||isFive||isSix||isSeven)? 'colorOrange ' : 'colorInit'"></span>
    <span :class="(isFour||isFive|lissix||isSeven)? 'colorOrange' : 'colorInit'"></span>
    <span :class="(isFive||isSix||isSeven)? 'colorGreen': 'colorInit'"></span>
    <span :class="(isSix|| isSeven)? 'colorGreen' : 'colorInit'"></span>
    <span :class="isSeven? 'colorSafe' : 'colorInit'"></span>
    <span v-show="password" class="left5"> {{psdstrength}} </span>
    </div>
    

    method部分

    onPasswordChange(val){
    this.isOne = false
    this.isTwo = false
    this.isThree = false
    this.isFour = false
    this.isFive = false
    this.isSix = false
    this.isSeven = false
    const psdVal = val.target.value
    const psdStrength = checkPassword(psdVal)
    this.psdstrength = psdStrength
    switch (psdStrength){
      case '非常弱':
        this.is0ne = true
        break;
      case '弱':
        this.isTwo = true
      break;
      case '一般':
        this.isThree = true
        break;
      case '强':
        this.isFour = true
        break;
      case '非常强':
        this.isFive = true
        break;
      case '安全':
        this.isSix = true
        break;
      case '非常安全':
        this.isSeven = true
        break;
      default:
        break;
      }
    }
    

    css
    在这里插入图片描述
    在这里插入图片描述
    借鉴网址:https://blog.csdn.net/libin_1/article/details/51577472

    效果图
    在这里插入图片描述

    展开全文
  • Vue实现6位数密码效果

    2020-10-18 04:39:01
    主要为大家详细介绍了Vue实现6位数密码,优化iOS WebView卡顿,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue实现密码强度校验

    2022-06-09 17:35:40
    vue实现密码强度校验

    一、前言

    在使用el-form的过程中会遇到密码修改的时候,此时需要对密码强度进行校验,本篇文章主要使用正则来对密码强度进行校验

    二、需求

    设置密码要求:8~16位,数字、字母和符号,三种选一种为弱模式,选两种为中模式,选三种为强模式

    三、具体代码

    html部分

    <el-form ref="psdform" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="新密码:" prop="newPassword">
            <el-input
              :type="newPsdtype"
              v-model="form.newPassword"
              placeholder="8-16位密码,区分大小写"
            >
              <span slot="suffix" class="show_pwd" @click="showPwd">
                <svg-icon
                  :icon-class="newPsdtype == 'password' ? 'eye' : 'eye-open'"
                />
              </span>
            </el-input>
    
            <div class="intensity">
              <span class="psdText">密码强度</span>
              <span
                class="line"
                :class="[level.includes('low') ? 'low' : '']"
              ></span>
              <span
                class="line"
                :class="[level.includes('middle') ? 'middle' : '']"
              ></span>
              <span
                class="line"
                :class="[level.includes('high') ? 'high' : '']"
              ></span>
              <div class="warningtext">
                密码应由8-16位数字、字母、符号组成。请不要使用容易被猜到的密码
              </div>
            </div>
          </el-form-item>
          <el-form-item label="确认密码:" prop="confirmPassword">
            <el-input
              :type="confirmPsdtype"
              v-model="form.confirmPassword"
              placeholder="确认密码"
            >
              <span slot="suffix" class="show_pwd" @click="showconfirmPwd">
                <svg-icon
                  :icon-class="confirmPsdtype == 'password' ? 'eye' : 'eye-open'"
                /> </span
            ></el-input>
          </el-form-item>
    <el-form>
    

    js部分

    data() {
        return {
          form: {
            newPassword: '',
            confirmPassword: ''
          },
          rules: {
            newPassword: [
              { required: true, validator: this.checkPassword, trigger: 'change' }
            ],
            confirmPassword: [
              {
                required: true,
                validator: this.checkConfirmPassword,
                trigger: 'blur'
              }
            ],
          },
          level: []
        }
      },
      methods: {
        //点击小眼睛
        showPwd() {
          if (this.newPsdtype === 'password') {
            this.newPsdtype = ''
          } else {
            this.newPsdtype = 'password'
          }
        },
        //点击小眼睛
        showconfirmPwd() {
          if (this.confirmPsdtype === 'password') {
            this.confirmPsdtype = ''
          } else {
            this.confirmPsdtype = 'password'
          }
        },
        // 校验密码
        checkPassword(rule, value, callback) {
          this.level = []
          if (!value) {
            return callback('密码不能为空')
          }
          if (value.length < 8) {
            return callback('密码不少于8位')
          }
          if (value.length > 16) {
            return callback('密码不大于16位')
          }
          // 校验是数字
          const regex1 = /^\d+$/
          // 校验字母
          const regex2 = /^[A-Za-z]+$/
          // 校验符号
          const regex3 =
            /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、]+$/
          if (regex1.test(value)) {
            this.level.push('low')
          } else if (regex2.test(value)) {
            this.level.push('low')
          } else if (regex3.test(value)) {
            this.level.push('low')
          } else if (/^[A-Za-z\d]+$/.test(value)) {
            this.level.push('low')
            this.level.push('middle')
          } else if (
            /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、\d]+$/.test(
              value
            )
          ) {
            this.level.push('low')
            this.level.push('middle')
          } else if (
            /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、A-Za-z]+$/.test(
              value
            )
          ) {
            this.level.push('low')
            this.level.push('middle')
          } else if (
            /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、A-Za-z\d]+$/.test(
              value
            )
          ) {
            this.level.push('low')
            this.level.push('middle')
            this.level.push('high')
          }
          return callback()
        },
        // 确认密码
        checkConfirmPassword(rule, value, callback) {
          if (!value) {
            return callback('请输入确认密码')
          }
          if (value != this.form.newPassword) {
            return callback('两次密码输入不一致,请重新输入')
          }
        },
    

    css部分

    .show_pwd {
      cursor: pointer;
      user-select: none;
      padding-right: 5px;
    }
    .intensity {
      .psdText {
        font-size: 14px;
        margin-right: 10px;
      }
      .line {
        display: inline-block;
        width: 48px;
        height: 4px;
        background: #d8d8d8;
        border-radius: 3px;
        margin-right: 8px;
        &.low {
          background: #f4664a;
        }
        &.middle {
          background: #ffb700;
        }
        &.high {
          background: #2cbb79;
        }
      }
      .level {
        margin: 0 16px 0 8px;
      }
      .warningtext {
        color: #5a5a5a;
        font-size: 12px;
        margin-top: 5px;
      }
    }
    

    四、实现效果

    以上代码是使用三种颜色来判断密码强度,具体效果如下
    在这里插入图片描述

    五、尾声

    上面图片分别演示了不同情况下的密码强度判断,并未演示长度校验,但功能已经实现,可自行验证

    展开全文
  • 主要给大家介绍了关于vue实现手机号码的校验的相关资料,主要是防抖函数的应用场景,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 1.密码要求有 数字、大写字母、小写字母 特殊字符 任选3种 的组合, 密码最小长度最少要求有8位,最大20位 2. 新密码中不能够包含帐户。 3.密码中不能包含有连续四位及以上顺序(或逆序)数字(如:密码中不能包含1234... ... ...
  • 1.vue密码校验: data() { const equalToPassword = (rule, value, callback) => { if (this.user.newPassword !== value) { callback(new Error("两次输入的密码不一致")); } else {callback();} }; ...
  • 密码由10-16位数字、字母及其!@#$%*-+/\.符号组成 pattern: '^(?=.*\\d)(?=.*[a-zA-Z])(?=.*[!@#$%*--+/\\\\.])[\\da-zA-Z!@#$%*--+/\\\\.]{10,16}$'
  • 本文实例为大家分享了VUE密码验证与提示功能的具体代码,供大家参考,具体内容如下 1. 概述 1.1 说明  vue项目中,为了较为明了的让用户看到所输入的密码信息的长度与复杂度是否满足要求,开发一个组件来满足此...
  • vue 表单校验密码 varvalidatePass =(rule,value,callback)=>{ //必须包含大小写字母、数字、特殊字符长度再9-12位之间 varregex=newRegExp( "(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{9,12}" ); if...
  • vue form表单密码校验(正则表达式)

    千次阅读 2021-05-14 16:16:26
    必须包含四种的组合密码 var passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,12}/ var isValid = passwordreg.test(this.user.newPassword); if(isValid !...必须包含四种中三种的组合校验 v
  • <el-form :model="shipmentFormal" label-width="180px" class="query" :inline="true" :rules="rules" style="background-color: #fff; border: 1px solid #eaeaea" ...
  • vue随机校验码

    2020-09-01 14:30:21
    验证码组件 <template> <div class="canvas-box"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight" @click="refreshCode" ></canvas>...expor.
  • 今天写的一个新的需求就是给系统增加修改密码功能,前端也需要做一个校验。如下图: 新密码不能与旧密码相同 确认新密码要与上一次输入一致 实现如下: 首先用的是antd的formModal表单组件 <a-form-model ...
  • 为防止攻击者恶意发送海量短信造成用户账户损失并影响正常业务,LeanCloud推出了免费图形校验码服务,并且可以在应用设置中设置“强制短信验证服务使用图形校验码”。 Vue是目前使用较广泛的三大前端框架之一,其...
  • vuePC端密码强度验证

    2022-05-01 19:38:34
    vuePC端密码强度验证 1、html <template> <div> <label style='margin-left:50px;'>密码:</label> <input v-model="pwd" id='inputValue' auto-complete="off"></input> ...
  • 在看这篇文章之前,我建议大伙可以去把项目demo拉到...先谈谈车牌号的校验。之前折腾了好久,网上文章也比较杂乱。后来无意中发现了一个比较好用的库 ——plate-number-input 就直接用来改造了。具体效果如下: 用法如
  • vue身份证号码校验

    千次阅读 2020-09-17 09:57:53
    一、vue身份证号码校验? let checkRegNo = (rule,value,callback) => { setTimeout(() => { const rr = /^[1-9]\d{1}(.{13}|.{16})$/ if(rr.test(value)){ if(value.length==18){ //加权因子 let ...
  • 如下所示: 密码 prop=pass> <el type=password v-model=ruleForm2.pass auto-complete=off></el> <el-form-item label=确认密码 prop=
  • vue密码强度校验

    千次阅读 多人点赞 2019-08-19 13:21:52
    vue密码强度校验 可直接复制使用,根据自己所需再更改! <template> <div class="container"> <label style="margin-left:40px;">密码:</label> <input v-model="pwdee" id="inputValue...
  • <input v-model="val" @input="input()"> <div>{{level==0?'弱':level == 1 ? '弱' : level == 2? '中':'高'}}</div> getLvl(val) { var level = 0; if (val.length <... .
  • vue校验手机号

    2020-03-06 16:14:56
    // 保存按钮 再方法里面添加就可以了 submit() { let reg = /^1[3456789]\d{9}$/; if (!reg.test(this.tel)) { Toast(‘手机格式不正确’) return } else { if (this.opt == ‘add’) { ...this.adtior...
  • 密码强度校验vue

    2021-08-05 18:45:06
    } this.showLevel = true // 校验是否纯数字 const regex1 = /^\d+$/ // 校验纯小写字母 const regex2 = /^[a-z]+$/ // 校验纯大写字母 const regex3 = /^[A-Z]+$/ if(regex1.test(value)){ this.isNum = true this...
  • Springboot Vue验证码校验

    千次阅读 2020-05-21 17:55:50
    项目中在登录注册环节肯定会用到验证码校验,Springboot整合Thymeleaf验证码校验之前已经做过了,那么现在Springboot和Vue前后端分离项目中该如何使用呢。 实现思路: 后端利用工具类生成验证码code,将验证码code...
  • 主要介绍了vue input 校验字母数字组合且长度小于30的实现代码,文章给大家补充介绍了在Vue.Js下使用el-input框只能输入数字并限制位数并且限制中文输入以及粘贴功能,感兴趣的朋友跟随脚本之家小编一起看看吧
  • 在看了vue的一些源码后,想将自己觉得有使用价值的一些方法封装处理,这里的话是对正则的封装,里面有很多常用方法,比如将金额换成大写,校验密码的格式,强度,校验手机号码,校验邮件....... 使用步骤: 第一...
  • vue 表单校验密码 <el-form :model="form" :rules="rules"> <el-form-item label="密码" prop="invalidPwd"> <el-input v-model="form.invalidPwd"></el-input> </el-form-item>...
  • vue常用校验规则

    2021-12-15 09:05:53
    1、IP地址: export function validateIP(rule, value,callback) { if(value==''||value==undefined||value==null){ callback(); }else { const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,561
精华内容 4,624
关键字:

vue校验码