How to implement login verification code in jquery

jQuery is a popular JavaScript library that provides many convenient features for web pages and applications, including form validation, mobile elements, and more.

CAPTCHA is a widely used human-machine verification technology used to identify the difference between human users and automated machine programs. In the website login interface, the verification code is used to prevent malicious programs or attackers from trying to log in to the account using brute force attacks. jQuery also provides an easy way to implement a verification code and add it to the form when performing login verification.

Perform the following steps:

1. Add the jQuery library to the web page

First, make sure that the jQuery library has been included in the web page. You can include it by using the latest version from the jquery.com website, or download the file locally and link to the web page.

2. Create a verification code element

Create a verification code element in the form and add it to the form HTML code using jQuery's append() method. The code is as follows:

<div id="captcha"></div>

3. Generate verification code image

Use the PHP GD library to create an image for the verification code and embed it in the HTML code as the data URL. The image should include 4 randomly generated characters, such as letters and numbers, that uniquely identify this verification code. Here is a simple PHP code example:

session_start();  //开始会话，用于存储验证码
$chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';  //所有可用字符
$length = 4;  //验证码字符数
$str = '';  //生成的验证码字符串
for ($i = 0; $i < $length; $i++) {
    $str .= $chars[mt_rand(0, strlen($chars) - 1)];
}
$_SESSION[&#39;captcha&#39;] = $str;   //将验证码保存到会话中供以后验证使用
$im = imagecreatetruecolor(140, 60);  //创建140 x 60像素的图像
$bg_color = imagecolorallocate($im, 255, 255, 255);  //白色背景
imagefill($im, 0, 0, $bg_color);  //填充背景色
$font_color = imagecolorallocate($im, 0, 0, 0);   //文本颜色
imagettftext($im, 30, 0, 10, 45, $font_color, &#39;arial.ttf&#39;, $str);  //向图像中添加验证码
header(&#39;Content-type: image/png&#39;);  //设置响应类型为PNG图像
imagepng($im);  //将图像输出到浏览器
imagedestroy($im);  //销毁图像资源

4. Add a captcha image to the form

Add the generated image to the captcha element with jQuery. You can use jQuery's attr() method to pass the data URL as the element's src attribute value and add a click event to the image to regenerate another verification code when the image is clicked. The following is an example of jQuery code:

$(&#39;#captcha&#39;).html(&#39;<img src="generate_captcha.php" alt="captcha" />');  //将验证码添加到元素中
$('#captcha img').click(function () {  //单击事件
    $(this).attr('src', 'generate_captcha.php');  //刷新验证码图像
});

This code uses an image relative URI ("generate_captcha.php") as the src attribute value. This relative URI should point to the PHP script that generates the image, and must start from the main script directory (usually the website root).

5. Validate Login Form

When the user submits the form, the form data is sent to the server for validation using an AJAX POST request. During the verification process, the verification code value in the data sent to the server must be compared with the last generated verification code value. Here is basic ajax code with this functionality:

$.ajax({
    url: 'validate_login.php',
    type: 'POST',
    data: {
        username: $('#username').val(),
        password: $('#password').val(),
        captcha: $('#captcha input').val()   //获取用户输入的验证码
    },
    success: function (data) {
        if (data.redirect) {
            window.location.replace(data.redirect); //如果登录成功跳转到主页
        } else {
            alert(data.message);  //如果登录失败提示错误信息
        }
    }
});

This technology prevents bots from brute force attacks on the site and also more effectively identifies invalid attempts belonging to malicious users. Identifying and preventing robots from attacking network information security is a problem that must be solved in the new generation of network information security. In managing enterprise network security solutions, verification code technology will gradually be widely used. When using jQuery, you can easily implement the verification code function by implementing the above 5 steps.

The above is the detailed content of How to implement login verification code in jquery. For more information, please follow other related articles on the PHP Chinese website!