vuejs简单验证码功能完整示例

2024-11-01 00:40:27

本文实例讲述了vuejs简单验证码功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
</head>
<body>
 <div id="app">
  <!-- 验证码输入框 -->
  <input type="text" v-model="aaa" @blur="checkNum" />
  <!-- 验证码切换按钮 -->
  <input type="button" v-model="bbb" @click="createCode"/>
  <!-- 提示信息 -->
  <span type="text" style="color: red;">{{ ccc }}</span>
 </div>
</body>
 <!-- import Vue before Element -->
 <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
 <script>
  new Vue({
   el: '#app',
   data: function() {
    return {
     aaa:"",
     bbb:"",
     ccc:"提示信息"
    }
   },
   created(){
    this.createCode();//初始化生成一个4位数的验证码
   },
   methods: {
    createCode(){
      var code = "";
      var codeLength = 4;//验证码的长度
      var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
       'S','T','U','V','W','X','Y','Z');//随机数
      for(var i = 0; i < codeLength; i++) {
      //循环操作
      var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）
      code += random[index];//根据索引取得随机数加到code上
      }
      this.bbb = code;//把code值赋给验证码
    },
    checkNum(){
     var num = this.aaa.toUpperCase();//输入内容全部转化为大写
     if(num == this.bbb){
      this.ccc = "验证码正确";
     }else{
      this.ccc = "验证码错误";
      this.createCode();
     }
    }
   }
  })
 </script>
</html>

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun运行上述代码，可得到如下运行结果：

希望本文所述对大家vue.js程序设计有所帮助。

vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能第一步:自定义一个生产随机验证码的组件,其本质是使用canvas绘制,详细代码如下: <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeig
vue 登录滑动验证实现代码

在没给大家讲解实现代码之前,先给大家分享效果图: 之前别人都是用jq写的,自己整理了一下开始使用 <el-form-item label="验证"> <div class="form-inline-input"> <div class="code-box" id="code-box"> <input type="text" name="code"
vue实现登录页面的验证码以及验证过程解析(面向新手)

做成之后就是这个样子接下来上代码创建一个组件.显示验证码图片 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script>
Vue 页面权限控制和登陆验证功能的实例代码

页面权限控制页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. Vue 动态添加路由及生成菜单这是我写过的一篇文章, 通过动态添加路由和菜单来做控制,不能访问的页面不添加到路由表里,这是其中一种办法. 另一种办法就是所有的页面都在路由表里,只是在访问的时候要判断一下角色权限.如果有权限就让访问,没有权限就拒绝,跳转到 404 页面. 思路: 在每一个路由的 meta 属性里,将能
vue组件表单数据回显验证及提交的实例代码

最近项目需要到vue开发单页面,所以就研究一下表单数据的回显,验证及提交如何用vue组件的方式实现. 代码如下: <template> <div class="index">  <div style="margin:20px;"> <div class="item"> <p>住户名称:</p>
使用Vue 实现滑动验证码功能

做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动.点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还是很清晰的,本文章大致说明下这些验证码的原理以及带大家实现一个滑动验证码. 我之前做过 Web 相关开发,尝试对接过 Lavavel 的极验验证,当时还开发了一个 Lavavel 包: https://github.com/Germey/LaravelGeetest ,在开发包的过程中了解到了验证码的两步校验规则. 实际上这类验证码的校验是分为两个步骤的: 1.第一步就是前端的
vuejs简单验证码功能完整示例

本文实例讲述了vuejs简单验证码功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div id="app">  <input type="text" v-model="aaa&q
Bootstrap实现前端登录页面带验证码功能完整示例

本文实例讲述了Bootstrap实现前端登录页面带验证码功能.分享给大家供大家参考,具体如下: Bootstrap有自定义的验证码样式,在前端页面可以直接使用,他的css.js在使用前要在开头引入上代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8">  <meta http-equiv="X-
利用PHP绘图函数实现简单验证码功能的方法

index.php <?php //===================================>>使用绘图技术绘制验证码 //1.随机产生4个随机数 $checkCode=""; for ($i=0;$i<4;$i++){ $checkCode.=dechex(rand(1, 15));// decheck()十进制转换为十六进制,即验证码上要显示的数字 } //2.存入列 session_start(); $_SESSION['checkCode'
PHP简单验证码功能机制实例详解

本文实例讲述了PHP简单验证码功能机制.分享给大家供大家参考,具体如下: 网站的安全性是开发者不可忽视的一个问题,目前使用最多的一种可以提高网站安全性的方法就是使用验证码功能机制,有的仅仅使用一个几位数字字母混乱的验证码,有的进行手机发送短信进行验证,有的使用邮箱发送邮件进行验证,但是这个验证码功能机制是如何实现的呢?下面就为大家详细解释验证码功能机制的实现思路以及简单的实现方法. 1.验证码功能机制实现思路 ① 常规的验证码实现: a.产生一张png的图片 b.为图片设置背景色 c.设置字体颜
SpringSceurity实现短信验证码功能的示例代码

一.思考 1.设计思路在获取短信验证码功能和图形验证码还是有很多相似的地方,所以这里在设计获取短信验证的时候,将之前开发好的的图形验证码进一步整合.抽象与重构. 在获取验证码的时候,它们最大的不同在于: 图形验证码是通过接口返回获取給前端.而短信验证码而言是通过第三方API向我们手机推送. 但是它们在登陆的时候就有很大的不同了,对于图形验证码而言验证通过之前就走UsernamePasswordAuthenticationFilter 过滤器了开始校验用户名密码了. 但对于短信登陆而言,确实也需
php利用云片网实现短信验证码功能的示例代码

本文将以php举例,介绍网页短信验证码功能的实现. 在众多的第三方短信服务商中我选择了云片网这个短信服务商,本文也将尽可能利用最简单的方式去帮助广大开发者解决短信验证码功能模块的实现. 再次之前我也参考了大部分网上的博客等,大多数都是把云片网的demo原封不动搬上去,对于我这个前端人员来说,根本毫无头绪,故此我将细致的讲解如何操作,以及献上我的源码. 我的业务流程就是通过点击发送验证码这个按钮,触发一个ajax请求事件,将手机号发送到后台,后台生成验证码发送到手机端,并返回这个验证码给前台进行验
Java简单计算圆周率完整示例

本文实例讲述了Java简单计算圆周率.分享给大家供大家参考,具体如下: 这两天在网上看到一个题,已知Pi可以用函数4 * (1 – 1/3 + 1/5 – 1/7 + -) 计算,计算出小数点后五位(计算圆周率).于是手动写了一个小demo,欢迎大家留言,进行交流与指教. 完整示例代码如下: package math; public class PiTest { private static int bytelimit = 5;// 小数后限制位数 /** * @author zhao33699
python之Flask实现简单登录功能的示例代码

网站少不了要和数据库打交道,归根到底都是一些增删改查操作,这里做一个简单的用户登录功能来学习一下Flask如何操作MySQL. 用到的一些知识点:Flask-SQLAlchemy.Flask-Login.Flask-WTF.PyMySQL 这里通过一个完整的登录实例来介绍,程序已经成功运行,在未登录时拦截了success.html页面跳转到登录页面,登录成功后才能访问success. 以下是项目的整体结构图: 首先是配置信息,配置了数据库连接等基本的信息,config.py DEBUG = Tr
PHP 图像处理与SESSION制作超简单验证码的方法示例

本文实例讲述了PHP 图像处理与SESSION制作超简单验证码的方法.分享给大家供大家参考,具体如下: 验证码的实现首先我们要清楚,无论是做什么东西,在做之前一定要有思路,譬如这个验证码里他有些什么,为了实现它我们该做些什么,怎么样去做. 这里我例举出几个点. 1.验证码肯定要有内容. 2.验证码里肯定要有干扰信息,就譬如,线条干扰和点点干扰. 那么为了实现他们我们该如何做呢? 第一步,创建一个名为captcha.php的文件在里面输入 <?php session_start();//开启会
java制作简单验证码功能

本文实例为大家分享了java制作简单验证码的具体代码,供大家参考,具体内容如下在这里我们需要用到java的画笔工具,所以我们需要导入以下包 import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*" 然后我就使用java脚本来实现一个小小的验证码 <%@ page contentType="image/jpeg; charset=utf-8" language="java&quo

vuejs简单验证码功能完整示例

相关推荐

随机推荐