前端注册验证码校验

时间 2019-12-06

标签前端注册验证码校验繁體版

原文原文链接

一、校验方式
html

输入后直接校验有好几种方式，以前一直再用的是onblur事件，当失去焦点是验证，可是注册码校验一般是最后一个表单输入，用户输入完直接点击提交，就会执行onblur事件，而不会执行提交事件，致使用户须要提交两次才能提交，用户体验感会至关差。如今替换成onkeyup事件，当用户的输入域中键入字符时，就当即触发事件。ajax

二、以下面代码同样url

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

<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(){code

var vcaptechStatus=false;orm

var vcaptechStr="验证码验证不经过，请从新输入"htm

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

if(t.length==5){ci

$.ajax({get

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="验证码验证不经过，请从新输入"

}