Rumah >pembangunan bahagian belakang >tutorial php >用户注册功能:输入验证码后点击空处,自动核对输入的验证码是否正确。如果正确,在验证码框框后面显示一个绿色的对勾
用户注册功能:输入验证码后点击空处,自动核对输入的验证码是否正确。如果正确,在验证码框框后面显示一个绿色的对勾。
要实现这个功能思路是什么,求大神指点
onblur 事件会在对象失去焦点时发生。
用户失去焦点之后使用ajax验证,然后前台根据返回数据显示。
失去焦点后,ajax把验证码提交到后端检查,并返回是否结果。
例子,生成验证码部分就不做了,先默认生成的验证码是1234
现在输入框输入验证码,然后点空白可以看到结果。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <title> js test </title> </head> <body> <script type="text/javascript"> function check(v){ $(function() { $.post('server.php', {'captcha':v}, function(ret) { if(ret['success']==true){ $('#result').html('success'); }else{ $('#result').html('fail'); } },'JSON'); }); } </script> <p>验证码:<input type="text" id="captcha" value="" onblur="check(this.value)"> <span id="result"></span></p> </body></html>
<?php$captcha = isset($_POST['captcha'])? $_POST['captcha'] : '';$ret = array();if($captcha=='1234'){ $ret['success'] = true;}else{ $ret['success'] = false;}echo json_encode($ret);?>