注册验证码校验-立即校验

注册验证码校验

1、校验方式

输入后直接校验有好几种方式，之前一直再用的是onblur事件，当失去焦点是验证，但是注册码校验通常是最后一个表单输入，用户输入完直接点击提交，就会执行onblur事件，而不会执行提交事件，导致用户需要提交两次才能提交，用户体验感会相当差。现在替换成onkeyup事件，当用户的输入域中键入字符时，就立即触发事件。

2、如下面代码一样

首先我们先定义一个flag状态设置为false 和flag 提示内容。当我们触发事件时，我们使用document.getElementById(x).value获取输入值对其校验.在我们项目中，校验码的位数是5位，所以我们在事件中判断位数为5位数时才做校验，如果非5位数的输入时flag状态都设置为false。当我们提交表单时，我们会再一次去判断vcaptechStatus状态的值，如果为false时，我们就做出错误提示，提示的内容为vcaptechStr的值，并且不让去提交表单。

Html:

<input id="captcha" type="text" name="captcha"οnkeyup="verifyCaptcha()">

<p id="captech">验证码提示</p>

Javascript:

function verifyCaptcha(){

var captechStatus=false;

var captechStr="验证码验证不通过，请重新输入"

var t=document.getElementById("captcha").value;

if(t.length==5){

$.ajax({

url : "",

data : "code="+t,

success : function(result) {

if(result){

captechStr='验证码正确';

captechStatus=success("#captech", captechStr);

}else{

captechStr='验证码输入错误';

captechStatus=error("#captech", captechStr);

} }

});

}else{

captechStatus=false;

$("#captech").html("");

captechStr="验证码验证不通过，请重新输入"

}

function success(id,content){

$(id).css("color", "#008F00");

content="<img src='/image/true.png'>"+content

$(id).html(content);

return true;

}

function error(id,content){

$(id).css("color", "#FF0000");

content="<img src='/image/false.png'>"+content

$(id).html(content);

return false;

注册验证码校验-立即校验相关推荐

26：第三章：开发通行证服务：9：【注册/登录】接口：验证码校验OK后，先根据手机号去查查该用户是否已存在，如果用户不存在就创建这个用户；（tkmybatis查询构建查询条件，雪花算法，枚举类等等）
说明: (1)本篇博客内容:继续开发[注册/登录]接口: ● 在[25:第三章:开发通行证服务:8:[注册/登录]接口:接收并校验"手机号和验证码"参数:]中,[注册/登录]接口, ...
vue element-ui 手机号校验验证码校验获取验证码倒数60秒无样式实现
这段时间被迫搞前端搞裂开了,记录一下手机号验证码校验登录的极简无样式前端实现巨丑!希望大佬们不介意下面是先演示效果点击登陆后显示校验信息输入手机号点击获取验证码输入符合校验的内容后点击登录提 ...
PHP表单注册验证,JavaScript实现注册页面表单校验的实例分享
下面小编就为大家带来一篇JavaScript 完成注册页面表单校验的实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 1.步骤分析第一步:确定事件(onsubmit ...
Java用户注册手机短信验证码校验功能实现
验证用户提交的手机短信验证码,如果验证码错误就跳回到当前页面.在短信验证码未填写或未正确填写时,就关闭底下注册按钮的功能,只有短信验证码通过校验后才打开注册按钮的功能.第二种方式是所有输入项全部填写完 ...
springboot集成shiro实现验证码校验
github:https://github.com/peterowang/shiro/ 这里实现验证码校验的思路是自己添加一个Filter继承FormAuthenticationFilter,Form ...
python版 —— 验证码校验打码兔平台的使用介绍
python版 -- 验证码校验打码兔平台的使用介绍 1. 背景验证码(CAPTCHA)的全称是全自动区分计算机和人类的图灵测试(Completely Automated Public Turin ...
AJAX应用【股票案例、验证码校验】
一.股票案例我们要做的是股票的案例,它能够无刷新地更新股票的数据.当鼠标移动到具体的股票中,它会显示具体的信息. 我们首先来看一下要做出来的效果: 1.1服务器端分析首先,从效果图我们可以看见很多 ...
JavaWeb简单的单点登录、验证码校验功能实现
前言最近项目刚刚告一段落,后期有时间会慢慢分解整理出来给大家分享.本文主要提供思路和核心代码,建立在有一定后台基础读者上.(相信没有基础的同学只要认真细读也是可以理解的) 技术原理 1.单点登录(S ...
JSP页面实现验证码校验
文章目录验证码校验分析生成验证码测试验证码校验验证码测试验证码校验添加验证码刷新在网页页面的使用中为防止"非人类"的大量操作和防止一些的信息冗余,增加验证码校验是许多 ...

注册验证码校验-立即校验

注册验证码校验-立即校验相关推荐

最新文章

热门文章