文档章节

前端注册验证码校验

zppiio
 zppiio
发布于 2014/11/28 13:33
字数 420
阅读 1273
收藏 8

1、      校验方式

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

2、      如下面代码一样

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

<input id="j_captcha_response" style="width:100px;margin-top: 8px;margin-left: 10px;"   type="text" name="j_captcha_response" value='' onkeyup="verifyCaptcha()">
 

function verifyCaptcha(){

var vcaptechStatus=false;

var vcaptechStr="验证码验证不通过,请重新输入"

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

     if(t.length==5){

            $.ajax({

              url : "${ctx }/Captcha.do?captcha",

              data : "id="+t,

              success : function(result) {

                  if(result){

                     vcaptechStatus=success("#vcaptech",'验证码正确');

                          vcaptechStr='验证码正确';

                  }else{

                         vcaptechStatus=error("#vcaptech",'验证码输入错误');

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

                   }            }

           });   

     }else{

        vcaptechStatus=false;

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

        vcaptechStr="验证码验证不通过,请重新输入"

     }

}
 

 


© 著作权归作者所有

zppiio
粉丝 2
博文 14
码字总数 6451
作品 0
厦门
程序员
私信 提问
json web token 实践登录以及校验码验证

去年我写了一篇介绍 的文章。 文章指出如果没有特别的用户注销及单用户多设备登录的需求,可以使用 jwt,而 jwt 的最大的特征就是无状态,且不加密。 除了用户登录方面外,还可以使用 jwt 验...

shanyue
04/27
0
0
ThinkPhp5 | 模块分析

ThinkPhp5框架是一款基于MVC的轻量级开发框架,其模块化的搭建,简单有效,相比于之前的版本,是一次颠覆性的改变。本文,结合一些网站的常用功能,简要分析一下基本原理,小试牛刀一把。 相...

采风JS
2017/06/10
0
0
自己实现的关于手机验证码的思路,共同探讨

应用场景:用户通过手机注册时,为了确保是本人手机注册,提供获取手机验证码的功能。 思路: 1.前台输入手机号码,校验手机号码(校验规则有待优化),点击“获取验证码”,按钮禁用60秒,6...

wangaowell
2016/12/08
187
0
Num63 前台用户注册&redis的简单java使用

前台页面分析: redis安装与使用 p2p项目中redis的使用: 生成验证码: 注册操作-用户名校验: 注册操作-密码与确认密码分析: 注册操作-录入验证码: 完成注册操作:

萧小蚁
2016/06/30
27
0
volley 实现验证码功能

公司的项目,为防止机器注册,需增加验证码功能,开始以为只是一张图片,通过glide加载个地址就好,但接口的同事说验证码接口是返回一个流,因为服务端不应该做验证码图片的存储,因为验证是...

MengXS
2018/01/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
9
0
多线程同时加载缓存实现

import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import java.util.concurrent.ExecutorServi......

暗中观察
昨天
3
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
2
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部