精华内容
下载资源
问答
  • vue随机校验码

    2020-09-01 14:30:21
    验证码组件 <template> <div class="canvas-box"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight" @click="refreshCode" ></canvas>...expor.

     验证码组件

    <template>
      <div class="canvas-box">
        <canvas
          id="s-canvas"
          :width="contentWidth"
          :height="contentHeight"
          @click="refreshCode"
        ></canvas>
      </div>
    </template>
    <script>
    export default {
      name: 'sidentify',
      data() {
        return {
          identifyCode: ''
        };
      },
      props: {
        // 父组件双向绑定
        identifyValue: {
          type: String,
          default: ''
        },
        // 校验码生成规则,可以添加字母等
        identifyCodes: {
          type: String,
          default: '1234567890'
        },
        fontSizeMin: {
          type: Number,
          default: 25
        },
        fontSizeMax: {
          type: Number,
          default: 30
        },
        backgroundColorMin: {
          type: Number,
          default: 255
        },
        backgroundColorMax: {
          type: Number,
          default: 255
        },
        colorMin: {
          type: Number,
          default: 0
        },
        colorMax: {
          type: Number,
          default: 160
        },
        lineColorMin: {
          type: Number,
          default: 100
        },
        lineColorMax: {
          type: Number,
          default: 255
        },
        dotColorMin: {
          type: Number,
          default: 0
        },
        dotColorMax: {
          type: Number,
          default: 255
        },
        contentWidth: {
          type: Number,
          default: 112
        },
        contentHeight: {
          type: Number,
          default: 32
        }
      },
      model: {
        prop: 'identifyValue',
        event: 'change'
      },
      mounted() {
        this.refreshCode();
      },
      methods: {
        refreshCode() {
          this.identifyCode = '';
          this.makeCode(this.identifyCodes, 4);
        },
        makeCode(o, l) {
          for (let i = 0; i < l; i++) {
            this.identifyCode += this.identifyCodes[
              this.randomNum(0, this.identifyCodes.length)
            ];
          }
          this.$emit('change', this.identifyCode);
        },
        // 生成一个随机数
        randomNum(min, max) {
          return Math.floor(Math.random() * (max - min) + min);
        },
        // 生成一个随机的颜色
        randomColor(min, max) {
          let r = this.randomNum(min, max);
          let g = this.randomNum(min, max);
          let b = this.randomNum(min, max);
          return 'rgb(' + r + ',' + g + ',' + b + ')';
        },
        drawPic() {
          let canvas = document.getElementById('s-canvas');
          let ctx = canvas.getContext('2d');
          ctx.textBaseline = 'bottom';
          // 绘制背景
          ctx.fillStyle = this.randomColor(
            this.backgroundColorMin,
            this.backgroundColorMax
          );
          ctx.fillRect(0, 0, this.contentWidth, this.contentHeight);
          // 绘制文字
          for (let i = 0; i < this.identifyCode.length; i++) {
            this.drawText(ctx, this.identifyCode[i], i);
          }
          this.drawLine(ctx);
          this.drawDot(ctx);
        },
        drawText(ctx, txt, i) {
          ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax);
          ctx.font =
            this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei';
          let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1));
          let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5);
          var deg = this.randomNum(-45, 45);
          // 修改坐标原点和旋转角度
          ctx.translate(x, y);
          ctx.rotate((deg * Math.PI) / 180);
          ctx.fillText(txt, 0, 0);
          // 恢复坐标原点和旋转角度
          ctx.rotate((-deg * Math.PI) / 180);
          ctx.translate(-x, -y);
        },
        drawLine(ctx) {
          // 绘制干扰线
          for (let i = 0; i < 5; i++) {
            ctx.strokeStyle = this.randomColor(
              this.lineColorMin,
              this.lineColorMax
            );
            ctx.beginPath();
            ctx.moveTo(
              this.randomNum(0, this.contentWidth),
              this.randomNum(0, this.contentHeight)
            );
            ctx.lineTo(
              this.randomNum(0, this.contentWidth),
              this.randomNum(0, this.contentHeight)
            );
            ctx.stroke();
          }
        },
        drawDot(ctx) {
          // 绘制干扰点
          for (let i = 0; i < 80; i++) {
            ctx.fillStyle = this.randomColor(0, 255);
            ctx.beginPath();
            ctx.arc(
              this.randomNum(0, this.contentWidth),
              this.randomNum(0, this.contentHeight),
              1,
              0,
              2 * Math.PI
            );
            ctx.fill();
          }
        }
      },
      watch: {
        identifyCode() {
          this.drawPic();
        }
      }
    };
    </script>
    <style scoped>
    .canvas-box {
      display: flex;
      align-items: center;
    }
    #s-canvas {
      cursor: pointer;
      margin-left: 8px;
    }
    </style>
    

    父组件

    <template>
      <div>
        <sidentify v-model="identifyValue"></sidentify>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          identifyValue: ''
        };
      }
    };
    </script>

     

    展开全文
  • 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 ...

    一、vue身份证号码校验?

    let checkRegNo = (rule,value,callback) => {
        setTimeout(() => {
            const rr = /^[1-9]\d{1}(.{13}|.{16})$/
            if(rr.test(value)){
                if(value.length==18){
                    //加权因子
                    let weight_factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
                    // 校验位
                    let check_code = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
                    let idWiSum = 0
                    for(let i =0; i<17 ;i++){
                        idWiSum += value.substring(i,i+1)*weight_factor[i]
                    }
                    //计算模
                    let idMod = idWiSum % 11  
                    let idLastCode = check_code[idMod]
                    if(value[17] == idLastCode){
                        callback
                    }
                    callback(new Error('身份证最后一位校验码不正确'))
                }
            }else{
                callback(new Error('身份证仅能为15位或18位且前两位为有效行政区划代码'))
            }
        },1000)
    }

    二、使用

    regNo : [
        {validator:checkRegNo,trigger:'blur'}
    ]

    展开全文
  • vue 密码校验表单

    2020-03-27 17:58:10
    vue代码如下: <template> <div> <el-form :model="form" :rules="rules" ref="form" label-width="120px"> <!-- 密码 --> <...

    vue代码如下:

    <template>
        <div>
             <el-form :model="form" :rules="rules" ref="form" label-width="120px">                 
                    <!-- 密码 -->
                    <el-form-item label="密码" prop='password'>
                        <el-input type="password" v-model="form.password"         
                          placeholder="密码"></el-input>
                    </el-form-item>
                    <!-- 确认密码 -->
                    <el-form-item label="确认密码" 
                        prop='confirmpassword'>
                        <el-input type="password" v-model="form.confirmpassword" 
                          placeholder="确认密码"></el-input>
                    </el-form-item>
             </el-form>
        </div>
    
    </template>
    <script>
        export default {
            let validateConfirmPassword = (rule, value, callback) => {
                if (value == '') {
                    callback(new Error("请输入确认密码")));
                } else if (value !== this.form.password) {
                    callback(new Error("两次密码输入不一致")));
                } else {
                    callback();
                }
            }
            data() {
                 return {
                    form: {
                        password: '',
                        confirmpassword: ''
                    },
                    rules: {
                        password: [
                            { required: true, message:"请输入密码", trigger: 'blur' }
                        ],
                        confirmpassword: [
                            { required: true, validator: validateConfirmPassword,                         
                               trigger: 'blur' }
                        ],
                    }
                }
            },
            methods: {
                // 提交表单
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            //表单验证通过
                        } else {
                            return false;
                        }
                    });
                },
                // 重置表单
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                }
        }
        }
    </script>

     

    展开全文
  • vue密码强度校验

    千次阅读 2019-08-19 13:21:52
    vue密码强度校验 可直接复制使用,根据自己所需再更改! <template> <div class="container"> <label style="margin-left:40px;">密码:</label> <input v-model="pwdee" id="inputValue...

    vue密码强度校验


    可直接复制使用,根据自己所需再更改!

    <template>
      <div class="container">
        <label style="margin-left:40px;">密码:</label>
        <input v-model="pwdee" id="inputValue" auto-complete="off" />
        <br />
        <div class="input_span">
          <label style="margin-left:40px;">强度:</label>
          <span id="one"></span>
          <span id="two"></span>
          <span id="three"></span>
        </div>
        <div id="font">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return { msgText: "", pwdee: "" };
      },
      methods: {
        checkStrong(sValue) {
          var modes = 0;
          //正则表达式验证符合要求的
          if (sValue.length < 1) return modes;
          if (/\d/.test(sValue)) modes++; //数字
          if (/[a-z]/.test(sValue)) modes++; //小写
          if (/[A-Z]/.test(sValue)) modes++; //大写
          if (/\W/.test(sValue)) modes++; //特殊字符
    
          //逻辑处理
          switch (modes) {
            case 1:
              return 1;
              break;
            case 2:
              return 2;
              break;
            case 3:
            case 4:
              return sValue.length < 4 ? 3 : 4;
              break;
          }
          return modes;
        }
      },
      components: {},
      watch: {
        pwdee(newname, oldname) {
          this.msgText = this.checkStrong(newname);
          if (this.msgText > 1 || this.msgText == 1) {
            document.getElementById("one").style.background = "red";
          } else {
            document.getElementById("one").style.background = "#eee";
          }
          if (this.msgText > 2 || this.msgText == 2) {
            document.getElementById("two").style.background = "orange";
          } else {
            document.getElementById("two").style.background = "#eee";
          }
          if (this.msgText == 4) {
            document.getElementById("three").style.background = "#00D1B2";
          } else {
            document.getElementById("three").style.background = "#eee";
          }
        }
      }
    };
    </script>
    
    <style scoped>
    #inputValue {
      width: 240px;
      margin-left: 20px;
      padding-left: 10px;
      border-radius: 3px;
    }
    .input_span span {
      display: inline-block;
      width: 85px;
      height: 10px;
      background: #eee;
      line-height: 20px;
    }
    
    #one {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      border-right: 0px solid;
      margin-left: 20px;
      margin-right: 3px;
    }
    
    #two {
      border-left: 0px solid;
      border-right: 0px solid;
      margin-left: -5px;
      margin-right: 3px;
    }
    
    #three {
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      border-left: 0px solid;
      margin-left: -5px;
    }
    #font span:nth-child(1) {
      color: red;
      margin-left: 80px;
    }
    #font span:nth-child(2) {
      color: orange;
      margin: 0 60px;
    }
    #font span:nth-child(3) {
      color: #00d1b2;
    }
    </style>
    

    在这里插入图片描述

    展开全文
  • vue校验身份证号码

    千次阅读 2020-04-29 13:41:30
    validateIDCard(code){ const city={11:'北京',12:'天津',13:'河北',14:'山西',15:'内蒙古',21:'辽宁',22:'吉林',23:'黑龙江 ',31:'上海',32:'江苏',33:'浙江',34:'安徽',35:'福建',36:'江西',37:'山东',41:'河南',...
  • Vue表单校验

    2020-10-23 15:59:56
    Vue校验使用说明 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 创建校验文件 创建validator.js文件,...
  • 今天是个好日子,用vue写了一个校验码来玩玩,样子如下: 1.img标签 <img style="height:40px; width: 100px; cursor: pointer;" ref="imgIdentifyingCode" :src="selectedLogoPicture.imgUrl" ...
  • Vue是目前使用较广泛的三大前端框架之一,其数据驱动及组件化的特性使得前端开发...本文在LeanCloud 短信轰炸与图形校验码官方文档 基础上,从封装需要出发开发一个简单的短信图形验证Vue组件,具体内容详情大家参考下本
  • vue校验 身份证号 手机号 email

    千次阅读 2019-01-24 11:00:10
    原文:... 一、基本身份证 手机号码等基本检验方式   /**  * @desc 基于ElementUI Form rules 进行使用, 参考官方文档: http://element-cn.eleme.io/#/zh-CN/component/form [自定义校验...
  • vue + elementUi 实现密码校验 <el-form-item v-else label="密码" label-width='150px' prop="password"> <el-input :placeholder="info.password" v-model="info.password" style="width: 500px"><...
  • password: [ { required: true, message: '请输入密码', transform: value => value, trigger: 'blur' }, { type: 'string', message: '请输入不包含空格的字符', trigger: 'blur', ...
  • //校验密码6-18位 if (!phoneTest.test(this.loginRuleForm.userName && this.loginRuleForm.repeat_Password)) { this.$message.error('密码须包含数字、字母两种元素,且密码位数为6-16位'); return false; } ...
  • apiclode输入密码校验vue <li class="bbox ycenter aui-border-b" style="height: 2.95rem;"> <img src="../../image/icon_pw.png" style="width: .85rem;height: .85rem;"> <input class="f1 ...
  • 有15万开发者使用LeanCloud服务,其中不乏知乎、懂球帝、爱范儿、拉卡拉等知名应用,LeanCloud提供了...为防止攻击者恶意发送海量短信造成用户账户损失并影响正常业务,LeanCloud推出了免费图形校验码服务,并且可...
  • 必须包含四种的组合密码 var passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,12}/ var isValid = passwordreg.test(this.user.newPassword); if(isValid !...必须包含四种中三种的组合校验 v
  • * @desc 基于ElementUI Form rules 进行使用, 参考官方文档: http://element-cn.eleme.io/#/zh-CN/component/form [自定义校验规则] * @example rules: { * ip: [ * {required: true, message: '...
  • vue权限校验笔记

    2021-04-20 15:06:50
    在此目录下,新建权限校验表单的.vue文件。 插件.vue文件 表单需要的基本元素:账号、密码、提交按钮、规则校验等。 <template> <div> // 基本元素 <el-dialog title="Authority verification" :...
  • 主要给大家介绍了关于vue实现手机号码的校验的相关资料,主要是防抖函数的应用场景,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • vue密码的规则校验 password: [ { required: true, message: '请输入密码' }, { min: 6, message: '输入密码长度必须大于6位' }, { pattern: new RegExp('^(?=.[A-Z])'), message: '必须有一个大写字母 ' }, { ...
  • 如下为el-form加入rules检验【:rules="userInfoFormRules"】 规则定义如下: ... realname: [{ required: true, message: "请输入姓名", trigger: "blur" ...vue---表单校验-rules外部引入自定义校验(validator)
  • 今天写的一个新的需求就是给系统增加修改密码功能,前端也需要做一个校验。如下图: 新密码不能与旧密码相同 确认新密码要与上一次输入一致 实现如下: 首先用的是antd的formModal表单组件 <a-form-model ...
  • 邮箱验证: const data = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/; 手机号验证: const data = /^[1][3,4,5,7,8][0-9]{9}$/; 至少六个字符,纯数字验证: const data = /^[0-9]{6,}*$/ ...
  • 写了一段时间的vue,前端用了element-ui,经常会用到from表单,总结一下form表单的校验,以及遇到过的问题。 1. 正常添加校验流程。在form表单加rule; 2. 只想对单个input校验; 3. 自定义校验; 4. 添加动态校验...
  • rules: { username: [{ required: true, message: "请输入用户名", trigger: "blur" }], realname: [{ required: true, message: "请输入姓名", trigger: "blur" }], ... mobile: [ { required: true, me.

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 233
精华内容 93
关键字:

vue校验码

vue 订阅