精华内容
下载资源
问答
  • vue 注册登录验证码 两种实现方式 1,一个input实现无法获取焦点 2.四个input实现 四个input 实现 单独封装的验证码组件 下面展示一些 内联代码片。 <template> <div> <div :class="['verifyCode',...

    vue 注册登录验证码 两种实现方式
    1,一个input实现无法获取焦点
    2.四个input实现 可以获取焦点

    一个input实现

    <div :class="['code-item', codeError!==''? 'errormsg':'' ]">
                      <span v-for="(item,index) in codeList" :key="index">{{ form.code[index]||'' }}</span>
                      <el-input v-model="form.code" autocomplete="off" class="input-code" placeholder="" />
                    </div>
    

    下面展示一些 内联代码片

    
    ```javascript
    codeList: [1, 2, 3, 4],
    
     .code-item{
    
            width: 220px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            position: relative;
            &.errormsg{
              span{
                border: 1px solid #F10353;
    
              }
            }
    
            span{
              display: inline-block;
              width: 40px;
              height: 40px;
              line-height: 40px;
              padding-bottom: 0;
              border: 1px solid #C7C7C7;
              text-align: center;
              color: #025157;
              font-size: 18px;
              font-weight: bold;
            }
            ::v-deep .input-code{
              input{
                color: transparent;
                background-color: transparent;
              }
              position: absolute;
              border: none;
              outline: none;
              color: transparent;
              background-color: transparent;
              text-shadow: 0 0 0 transparent;
              height: 44px;
              width: 100%;
              -webkit-appearance: none !important;
              margin: 0;
    
            }
          }
    

    四个input 实现:

    单独封装的验证码组件

    下面展示一些 内联代码片

    <template>
      <div>
        <div :class="['verifyCode',error!==''?'errmsg':'']">
          <input
            v-for="p in inputNums"
            :key="p"
            ref="input"
            :value="code[p-1]"
            type="text"
            @input="inputFun($event,p)"
            @keydown.delete="e=>{deleteCode(e.target.value,p)}"
          >
        </div>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'Verifycode',
      components: {
      },
      props: {
        inputNums: {
          type: Array,
          default: () => {
    
          }
        },
        value: {
          type: String,
          default: ''
        },
        error: {
          type: String,
          default: ''
    
        }
      },
      data() {
        return {
          code: ['', '', '', '']
        }
      },
      computed: {
      },
      watch: {
        error(val) {
          console.log('error', this.error)
        },
        // value(newVal) {
        //   this.code = newVal.split('')
        //   // console.log('fffff', this.code)
        // },
        code(newVal) {
        }
        // code: {
        //   // handler() {
        //   //   this.$emit('input', this.code.join(''))
        //   //   console.log('this.code.watch', this.code.join(''))
        //   // },
        //   // deep: true,
        //   // immediate: true
        //   // this.$emit('input', newVal)
    
        //   // console.log('cccc', this.code)
        // }
      },
      created() {
      },
      mounted() {
    
      },
      methods: {
       
        deleteCode(e, p) {
          if (e === '') {
            if (p === 1) {
              this.code[p - 1] = ''
              this.$refs.input[p - 1].focus()
              return false
            }
            if (p > 0) {
              this.code[ p - 1] = ''
              this.$refs.input[p - 2].focus()
            }
          } else {
            this.code[p - 1] = ''
          }
          this.$emit('input', this.code.join(''))
        },
        inputFun(e, p) {
          const ele = e.target
          const siblingsNode = ele.parentNode.children
          const value = e.target.value.replace(/\W/g, '').slice(-1)
          ele.value = value
          if (value) {
            this.code[p - 1] = value
            if (p >= siblingsNode.length) {
              siblingsNode[p - 1].focus()
            } else {
              siblingsNode[p].focus()
            }
          } else {
            return false
          }
          this.$emit('input', this.code.join(''))
        }
      }
    }
    </script>
    
    

    下面展示一些 内联代码片

    <style lang='scss' scoped>
    .verifyCode{
      &.errmsg{
        input{
          border: 1px solid #F10353;
        }
      }
        input{
          text-align: center;
          width: 40px;
          height: 40px;
          // padding:0px ;
          border:1px solid #C7C7C7;
          color: #025157;
          font-size: 18px;
          font-family: Lato-Bold, Lato;
          font-weight: bold;
          margin-right: 20px;
          outline: none;
          &:last-child{
            margin-right:0px;
          }
    
      }
    
    }
    
    </style>
    
    展开全文
  • 验证码功能在我们的身边用处极广,今天小编给大家分享基于vue实现随机验证码功能,感兴趣的朋友跟随小编一起看看吧
  • 主要为大家介绍了VUE实现图片验证码功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 最近项目结束,空闲时间比较多,今天小编抽时间给大家使用vue写一个小例子,就决定做验证码倒计时功能,具体实例代码大家参考下本
  • 本文通过实例代码给大家介绍了Vue 实现登录界面 验证码功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 本文实例为大家分享了vue3.0实现点击切换验证码(组件)及校验的具体代码,供大家参考,具体内容如下 先看效果 父组件 验证码 placeholder=输入验证码 v-model=verify > 点击更换
  • 最近做项目遇到这样的需求要求输入4位或6位短信验证码,输入完成后收起键盘。实现步骤大家参考下本
  • 主要为大家介绍了如何简单实现vue验证码60秒倒计时功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文章主要来介绍一下第一个阶段,也就是前端校验的验证码实现,下面来介绍一下拖动验证码的具体实现。这篇文章主要介绍了利用 Vue 实现滑动验证码,需要的朋友可以参考下
  • Vue 图形验证码实现 详解

    万次阅读 2019-07-15 13:26:02
    import Sidentify from '../components/common/Sidentify' //**引入验证码组件** export default { data: function(){ return { ruleForm: { username: '', password: '', sidentify: '', }, rules: { ...

    其实绘制图形二维码就是使用 进行图形绘制

    canvas 绘制图形

    1.获取元素dom 访问绘图上下文

    <canvas id="tutorial" width="150" height="150"></canvas>
    var canvas = document.getElementById('tutorial'); //获取dom
    var ctx = canvas.getContext('2d'); //访问绘图上下文

    2.第二步就是绘制相应内容了,下面是vue 绘制验证码图形

    如图:[在这里插入图片描述](https://img-blog.csdnimg.cn/2019071512072254.png在这里插入图片描述

    1.父组件login.vue
    <template>
        <div class="login-wrap">
            <div class="ms-login">
                <div class="ms-title">后台管理系统</div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
                    <el-form-item prop="username">
                        <el-input v-model="ruleForm.username" placeholder="username">
                            <el-button slot="prepend" icon="el-icon-people"></el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')">
                            <el-button slot="prepend" icon="el-icon-lock"></el-button>
                        </el-input>
                    </el-form-item>
    
                    <el-form-item prop="sidentify"> // 验证码
                        <el-col :span="14">
                        <el-input placeholder="sidentify" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')">
                        </el-input>
                        </el-col>
                        <el-col :span="8">
                            <v-sidentify></v-sidentify>
                        </el-col>
                    </el-form-item>
                    <div class="login-btn">
                        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    </div>
                    <p class="login-tips">Tips : 用户名和密码随便填。</p>
                </el-form>
            </div>
        </div>
    </template>
    
    <script>
        import Sidentify from '../components/common/Sidentify'  //**引入验证码组件**
        export default {
            data: function(){
                return {
                    ruleForm: {
                        username: '',
                        password: '',
                        sidentify: '',
                    },
                    rules: {
                        username: [
                            { required: true, message: '请输入用户名', trigger: 'blur' }
                        ],
                        password: [
                            { required: true, message: '请输入密码', trigger: 'blur' }
                        ],
                        sidentify:[
                            {required: true}
                        ]
                    }
                }
            },
            components: {
                'v-sidentify':Sidentify 
            },
          
        }
    </script>
    
    2. 创建验证码组件
    <template>
        <div class="s-canvas">
            <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
        </div>
    </template>
    <script>
        export default {
            name: 'SIdentify',
            props: {
                identifyCode: {
                    type: String,
                    default: 'asdf'
                },
    
            },
            data(){
                return {
                    fontSizeMin: 160,
                    fontSizeMax: 40,
                    backgroundColorMin: 180,
                    backgroundColorMax:240,
                    colorMin: 50,
                    colorMax: 160,
                    lineColorMin:40,
                    lineColorMax: 180,
                    dotColorMin: 0,
                    dotColorMax: 255,
                    contentWidth: 112,
                    contentHeight: 38
                }
            },
            methods: {
                // 生成一个随机数
                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.strokeStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax) //图形轮廓的颜色设置
                    ctx.fillRect(0, 0, this.contentWidth, this.contentHeight) //绘制一个填充的矩形 0 0 width height x起点 y起点  宽 高
                    ctx.strokeRect(0,0,this.contentWidth, this.contentHeight) // 绘制一个矩形边框 0 0 width height x起点 y起点  宽 高
                    // ctx.clearRect(50,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' //字体大小
                    ctx.textBaseline = 'alphabetic' //基线对齐
                    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 < 8; i++) {
                        ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
                        ctx.beginPath() //新建一条路径
                        ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight)) //设置起点x,y
                        ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight)) //绘制直线 x,y 一条当前位置到x,y点的直线
                        ctx.stroke() // 通过线条绘制图形轮廓
                        // ctx.closePath() //结束闭合路径
                    }
                },
                drawDot(ctx) {
                    // 绘制干扰点
                    for (let i = 0; i < 100; i++) {
                        ctx.fillStyle = this.randomColor(0, 255)
                        ctx.beginPath()
                        // 绘制圆弧或圆,x,y,radius,startAngle,endAngle,anticlockwise // x,y 圆心点,radius 半径,从startAngle开始到endAngle结束
                        ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
                        ctx.fill() //通过填充路径的内容区域生成实心的图形。
                    }
                }
            },
            watch: {
                identifyCode() {
                    this.drawPic()
                }
            },
            mounted() {
                this.drawPic()
            }
        }
    </script>
    
    
    展开全文
  • 主要为大家详细介绍了vue实现短信验证码输入框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue实现验证码功能

    2020-07-03 18:44:38
    记录下参考地址:https://www.jb51.net/article/175603.htm
    展开全文
  • 无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能,输入手机号,得到验证码,这篇文章主要介绍了基于vue实现短信验证码登录功能,需要的朋友可以参考下
  • 今天小编就为大家分享一篇vue 验证码界面实现点击后标灰并设置div按钮不可点击状态,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 此资源主要是vue实现通过发送短信验证码进行登录,其中的密钥需要自己去sms平台进行申请.
  • 主要介绍了vue实现登录页面的验证码以及验证过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 演示地址:https://loyer.wang/
  • 主要介绍了Vue实现滑动拼图验证码功能,需要的朋友可以参考下
  • 主要介绍了vue 实现通过手机发送短信验证码注册功能的相关资料,需要的朋友可以参考下
  • 主要介绍了vue实现一个6个输入框的验证码输入组件功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue验证码实现

    2020-11-12 10:38:44
    Ant Design vue验证码实现验证码组件(子组件)注册组件(父组件)效果说明实现思路父组件完整代码 验证码组件(子组件) #Verification.vue <template> <div class="s-canvas"> <canvas id="s-...

    验证码组件(子组件)

    #Verification.vue

    <template>
        <div class="s-canvas">
            <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
        </div>
    </template>
    
    <script>
        export default {
            name: "Verification",
            //定义props数据可以通过父组件向子组件传递随机数让子组件渲染成验证码
            props: {
                identifyCode: {
                    type: String,
                    default: '1234'
                },
                fontSizeMin: {
                    type: Number,
                    default: 16
                },
                fontSizeMax: {
                    type: Number,
                    default: 40
                },
                backgroundColorMin: {
                    type: Number,
                    default: 180
                },
                backgroundColorMax: {
                    type: Number,
                    default: 240
                },
                colorMin: {
                    type: Number,
                    default: 50
                },
                colorMax: {
                    type: Number,
                    default: 160
                },
                lineColorMin: {
                    type: Number,
                    default: 40
                },
                lineColorMax: {
                    type: Number,
                    default: 180
                },
                dotColorMin: {
                    type: Number,
                    default: 0
                },
                dotColorMax: {
                    type: Number,
                    default: 255
                },
                contentWidth: {
                    type: Number,
                    default: 112
                },
                contentHeight: {
                    type: Number,
                    default: 38
                }
            },
            methods: {
                // 生成一个随机数
                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 < 8; 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 < 100; 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()
                }
            },
            mounted() {
                this.drawPic()
            }
        }
    </script>
    
    <style scoped>
    
    </style>
    

    注册组件(父组件)

    关于验证码部分的片段

    <a-form-item
                    v-bind="formItemLayout"
                    label="Captcha"
                    extra="We must make sure that your are a human."
    
            >
                <a-row :gutter="8">
                    <a-col :span="6">
                        <a-input v-decorator="[
                  'captcha',
                  { rules: [{ required: true, message: '请输入验证码!' },{validator:validateCode,}] },
                ]"/>
                    </a-col>
                    <a-col :span="12" @click="refreshCode">
                        <Verification :identifyCode="identifyCode"></Verification>
                    </a-col>
                </a-row>
            </a-form-item>
    

    父组件js部分

    <script>
        import Verification from "./Verification";
    
        export default {
            name: "register",
            components:{
                Verification
            },
            data() {
                return {
                    identifyCodes: '1234567890',
                    identifyCode: '',
                    formItemLayout: {
                        labelCol: {
                            xs: { span: 24 },
                            sm: { span: 8 },
                        },
                        wrapperCol: {
                            xs: { span: 24 },
                            sm: { span: 16 },
                        },
                    },
                };
            },
            methods: {
           		 //取随机数
                randomNum(min, max) {
                    return Math.floor(Math.random() * (max - min) + min)
                },
                //重置验证码方法
                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)
                            ]
                    }
                },
                //validator的验证方法,value为输入框输入的值,callback定义的是返回的提示。在antd的v-decorator表单验证中,callback()带值,则提交不了表单,比如这样callback('123')即时callback('')也不行。
                validateCode(rule, value, callback) {
                    const identifyCode = this.identifyCode
                    if (identifyCode !== value) {
                        callback('请输入正确的验证码');
                    } else {
                        callback();
                    }
                },
            },
            //保证每次刷新都进行验证码的更新
            created() {
                this.refreshCode()
            }
        }
    </script>
    

    效果

    说明

    该验证码因为用的是antd的v-decorator的数据验证,所以效果是在输入时就会有提示是否输入正确,而不是在提交表单之后才给提示。若是要后者的效果,选择用在form表单标签写数据验证规则。

    实现思路

    父组件创建一个随机值—>子组件接收值通过canvas 绘制验证码。
    传值:子组件上建立props数据表

    export default {
            name: "Verification",
            props: {
                identifyCode: {
                    type: String,
                    default: '1234'
                },
                }
                }
    

    父组件在调用子组件时在其标签上用冒号加变量名引用传值:

    <Verification :identifyCode="identifyCode"></Verification>//冒号里的identifyCode为要穿给子组件的数据
    

    父组件向子组件传值参考:https://www.cnblogs.com/shengnan-2017/p/10419050.html

    父组件完整代码

    #register.vue

    <template>
        <a-form :form="form"  class="register1"  @submit="handleSubmit">
            <a-form-item v-bind="formItemLayout" label="邮箱">
                <a-input
                        v-decorator="[
              'email',
              {
                rules: [
                  {
                    type: 'email',
                    message: 'The input is not valid E-mail!',
                  },
                  {
                    required: true,
                    message: 'Please input your E-mail!',
                  },
                ],
              },
            ]"
                />
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="密码" has-feedback>
                <a-input
                        v-decorator="[
              'password',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入密码!',
                  },
                  {
                    validator: validateToNextPassword,
                  },
                ],
              },
            ]"
                        type="password"
                />
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="确认密码" has-feedback>
                <a-input
                        v-decorator="[
              'confirm',
              {
                rules: [
                  {
                    required: true,
                    message: '请确认您的密码!',
                  },
                  {
                    validator: compareToFirstPassword,
                  },
                ],
              },
            ]"
                        type="password"
                        @blur="handleConfirmBlur"
                />
            </a-form-item>
            <a-form-item v-bind="formItemLayout">
          <span slot="label">
            昵称&nbsp;
            <a-tooltip title="网络世界真真假假假假真真">
              <a-icon type="question-circle-o" />
            </a-tooltip>
          </span>
                <a-input
                        v-decorator="[
              'nickname',
              {
                rules: [{ required: true, message: '请输入昵称!', whitespace: true }],
              },
            ]"
                />
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="电话号码">
                <a-input
                        v-decorator="[
              'phone',
              {
                rules: [{ required: true, message: '请输入你的电话号码!' }],
              },
            ]"
                        style="width: 100%"
                >
                    <a-select
                            slot="addonBefore"
                            v-decorator="['prefix', { initialValue: '86' }]"
                            style="width: 70px"
                    >
                        <a-select-option value="86">
                            +86
                        </a-select-option>
                        <a-select-option value="87">
                            +87
                        </a-select-option>
                    </a-select>
                </a-input>
            </a-form-item>
    
            <a-form-item
                    v-bind="formItemLayout"
                    label="Captcha"
                    extra="We must make sure that your are a human."
    
            >
                <a-row :gutter="8">
                    <a-col :span="6">
                        <a-input v-decorator="[
                  'captcha',
                  { rules: [{ required: true, message: '请输入验证码!' },{validator:validateCode,}] },
                ]"/>
                    </a-col>
                    <a-col :span="12" @click="refreshCode">
                        <Verification :identifyCode="identifyCode"></Verification>
                    </a-col>
                </a-row>
            </a-form-item>
            <a-form-item v-bind="tailFormItemLayout">
                <a-checkbox v-decorator="['agreement', { valuePropName: 'checked' }]">
                    I have read the
                    <a href="">
                        agreement
                    </a>
                </a-checkbox>
            </a-form-item>
            <a-form-item v-bind="tailFormItemLayout">
                <a-button type="primary" html-type="submit" >
                    Register
                </a-button>
            </a-form-item>
        </a-form>
    </template>
    
    <script>
        import Verification from "./Verification";
    
        export default {
            name: "register",
            components:{
                Verification
            },
    
            data() {
                return {
                    isDebugLogin: false,
                    confirmDirty: false,
                    identifyCodes: '1234567890',
                    identifyCode: '',
                    code:'',
                    autoCompleteResult: [],
                    formItemLayout: {
                        labelCol: {
                            xs: { span: 24 },
                            sm: { span: 8 },
                        },
                        wrapperCol: {
                            xs: { span: 24 },
                            sm: { span: 16 },
                        },
                    },
                    tailFormItemLayout: {
                        wrapperCol: {
                            xs: {
                                span: 24,
                                offset: 0,
                            },
                            sm: {
                                span: 16,
                                offset: 8,
                            },
                        },
                    },
                };
            },
            beforeCreate() {
                this.form = this.$form.createForm(this, { name: 'register' });
            },
            methods: {
                randomNum(min, max) {
                    return Math.floor(Math.random() * (max - min) + min)
                },
                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)
                            ]
                    }
                },
                handleSubmit(e) {
                    e.preventDefault();
                    this.form.validateFieldsAndScroll((err, values) => {
                        if (!err) {
                            console.log('Received values of form: ', values);
                        }
                    });
                },
                handleConfirmBlur(e) {
                    const value = e.target.value;
                    this.confirmDirty = this.confirmDirty || !!value;
                },
                compareToFirstPassword(rule, value, callback) {
                    const form = this.form;
                    if (value && value !== form.getFieldValue('password')) {
                        callback('Two passwords that you enter is inconsistent!');
                    } else {
                        callback();
                    }
                },
                validateCode(rule, value, callback) {
                    const identifyCode = this.identifyCode
                    if (identifyCode !== value) {
                        callback('请输入正确的验证码');
                    } else {
                        callback();
                    }
                },
                validateToNextPassword(rule, value, callback) {
                    const form = this.form;
                    if (value && this.confirmDirty) {
                        form.validateFields(['confirm'], { force: true });
                    }
                    callback();
                },
    
            },
            created() {
                this.refreshCode()
            }
        }
    </script>
    
    <style>
    .register1{
        margin: 0 auto;
        padding-right: 20%;
    }
    </style>
    ```![](https://img-blog.csdnimg.cn/20201112103500887.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM3Mjc4Mw==,size_16,color_FFFFFF,t_70#pic_center)
    
    本例用到的ant design 组件,若需复现记得在main.js里面注册相应组件。
    
    本文借鉴:https://www.jianshu.com/p/99c6e2f3e457
    
    展开全文
  • vue+SSM实现验证码功能

    2020-10-17 15:53:26
    主要介绍了vue+SSM实现验证码功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • <template> <div class="login-box"> <a-form-model :model="user" :rules="rules" ref="loginForm"> <a-form-model-item prop="username"> <a-input placeholder="请输入账户" .
  • 首先自己导入Vue和jQuery等需要的包,这里我就不放图了。 工具类由于过长我放在文章的最后 在html写入基本请求验证码 <input type="text" name="yzm" placeholder="填写右侧的验证码" data-validate=...
  • 周末帮一个朋友写了一个SpringBoot+Vue的项目,抽时间整理一下里面的常用的技术点。...先看下效果图2、然后贴一下前端项目结构Login.vue 是登录页面的 vue 文件,Identify.vue验证码的二、vue 前端...
  • Vue 实现验证码功能

    2021-09-01 16:11:09
    function GVerify (options) { // 创建一个图形验证码对象,接收options对象为参数 this.options = { // 默认options参数值 id: '', // 容器Id canvasId: 'verifyCanvas', // canvas的ID width: '80', // 默认...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,777
精华内容 2,310
关键字:

vue验证码实现

vue 订阅