vue 实现验证码、刷新以及校验验证码输入是否准确

最新推荐文章于 2024-06-20 19:39:43 发布

原创最新推荐文章于 2024-06-20 19:39:43 发布 · 3k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#Vue 实现验证码

Vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

验证码

1 篇文章

订阅专栏

本文介绍了在Vue项目中实现验证码的动态生成、刷新及验证功能。通过引入Sidentify.vue组件，简单几步即可实现在页面中展示和更新验证码，并进行输入准确性检查。欢迎大家留言分享更优的实现方式，一起探讨进步。

1.引入Sidentify.vue文件在工程中

2.在当前 .vue文件中引入

import SIdentify from './Sidentify'  //**引入验证码组件**

components: {
    SIdentify
},

3. 引入组件<s-identify :identifyCode="identifyCode"></s-identify>

<!-- 登录-->
<el-dialog width="500px" typeLogin="login" title="登录" class="Dialog" :visible.sync="dialogVisible">
  <el-form :model="loginForm" :rules="rules" status-icon ref="loginForm" class="demo-ruleForm">
    <el-form-item prop="login">
      <div class="el-input fa-user fa">
        <input v-model="loginForm.login" @keyup="enterSubmit" class="el-input__inner" placeholder="请输入邮箱">
      </div>
    </el-form-item>
    <el-form-item prop="password">
      <div class="el-input fa-lock fa">
        <input type="password" v-model="loginForm.password" @keyup="enterSubmit" class="el-input__inner" placeholder="请输入密码">
      </div>
    </el-form-item>
    <el-form-item prop="sidentify">
      <div class="validCode">
        <input v-model="loginForm.sidentify" @keyup="enterSubmit" class="el-input__inner" placeholder="请输入右侧验证码">
      </div>
      <div class="code-img" @click="refreshCode">
        <s-identify :identifyCode="identifyCode"></s-identify>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button class="submit-login" v-on:click="ValidForm('loginForm')" type="primary" style="">登录</el-button>
    </el-form-item>
  </el-form>
</el-dialog>

4. 完整代码

export default {
    data() {
        var login = (rule, value, callback) => {
            var regUserName = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
            if (value === '') {
                callback(new Error('请输入邮箱'));
            } else if (!regUserName.test(value)) {
                callback(new Error('邮箱格式错误，请重新输入'));
            } else {
                callback();
            }
        };
        var password = (rule, value, callback) => {
            var regUserName = /.{6,18}/;
            if (value === '') {
                callback(new Error('请输入密码'));
            } else if (!regUserName.test(value)) {
                callback(new Error('密码格式错误，请输入6-18任意字符'));
            } else {
                callback();
            }
        };
        const sidentify = (rule, value, callback) => {
            let newVal = value.toLowerCase()
            let identifyStr = this.identifyCode.toLowerCase()
            if (newVal === '') {
                callback(new Error('请输入验证码'))
            } else if (newVal !== identifyStr) {
                console.log('validateVerifycode:', value)
                callback(new Error('验证码不正确'))
            } else {
                callback()
            }
        };
        return {
            identifyCodes: '1234567890ABCDEFGHIGKLMNoPQRSTUVWXYZ',
            identifyCode: '', //验证码
            //弹出框是否显示(登录)
            dialogVisible: false,
            loginForm: {login: '', password: '', sidentify: '',},
            rules: {
                login: [{validator: login, trigger: 'blur'}],
                password: [{validator: password, trigger: 'blur'}],
                sidentify: [{validator: sidentify, trigger: 'blur'}]
            }, 
    },
    components: {
        SIdentify
    },
    //生命周期（页面起初加载的）
    mounted() {
        // 验证码初始化
        this.identifyCode = ''
        this.makeCode(this.identifyCodes, 4)
    },
    //进行数据交互的方法
    methods: {
        publicDialog(type) {
           this.dialogVisible = true;
        },
        // 生成随机数
        randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min)
        },
        // 生成四位随机验证码
        makeCode(o, l) {
            for (let i = 0; i < l; i++) {
                this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
            }
            console.log(this.identifyCode)
        },
        // 切换验证码
        refreshCode() {
            this.identifyCode = ''
            this.makeCode(this.identifyCodes, 4)
        },
        //绑定回车事件
        enterSubmit(ev) {
            var keyCode = ev.keyCode || ev.which;
            if (keyCode == 13) {
                this.ValidForm();
            }
        },
        ValidForm(loginType) {
                this.$refs['loginForm'].validate((valid) => {
                    if (valid) {
                        this.login();
                    }
                });
          
        },
        login() {}, 
    }
}

总结：以上是我在开发中动态获取验证码方法，有什么更好的方法欢迎留言交流，共同进步