Bootstrap实现登录校验表单(带验证码)

实现Bootstrap登录校验表单(带验证码)需要遵循以下步骤：

1. 引入Bootstrap和jQuery库

在标签内引入Bootstrap和jQuery库：

<head>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

2. 编写HTML结构

在标签内编写HTML结构，并给表单、输入框、按钮等元素设定ID和样式：

<body>
  <div class="container">
    <h2>登录</h2>
    <form class="form-horizontal" id="login-form">
      <div class="form-group">
        <label class="control-label col-sm-2" for="username">用户名:</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="username" placeholder="请输入用户名">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="password">密码:</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="password" placeholder="请输入密码">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="captcha">验证码:</label>
        <div class="col-sm-7">
          <input type="text" class="form-control" id="captcha" placeholder="请输入验证码">
        </div>
        <div class="col-sm-3">
          <img id="captcha_img" src="#" alt="">
          <a href="#" id="change_captcha">看不清？换一张</a>
        </div>
      </div>
      <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-primary">登录</button>
        </div>
      </div>
    </form>
  </div>
</body>

其中，用户名输入框的ID为"username"，密码输入框的ID为"password"，验证码输入框的ID为"captcha"，验证码图片的ID为"captcha_img"，更换验证码的a标签的ID为"change_captcha"。

3. 编写JavaScript代码

使用jQuery编写JS代码，监听表单的提交事件，通过Ajax请求向后端发送数据并接收返回值：

<script>
$(function(){
  // 更换验证码的点击事件
  $('#change_captcha').click(function(){
    var captcha_src = '/api/captcha?' + Math.random(); // 后端API接口生成验证码
    $('#captcha_img').attr('src', captcha_src);
  });

  // 登录表单的提交事件
  $('#login-form').submit(function(){
    var username = $('#username').val();
    var password = $('#password').val();
    var captcha = $('#captcha').val();
    $.ajax({
      url:'/api/login',
      type:'POST',
      data:{'username':username, 'password':password, 'captcha':captcha},
      dataType:'json',
      success:function(data){
        if(data.code == 0){
          alert('登陆成功！');
          window.location.href = '/index.html'; // 登录成功后跳转
        }else{
          alert('登录失败：' + data.msg);
          var captcha_src = '/api/captcha?' + Math.random(); // 登录失败后更换验证码
          $('#captcha_img').attr('src', captcha_src);
        }
      },
      error:function(){
        alert('登录失败：网络错误！');
      }
    });
    return false; // 防止表单自动跳转
  });
});
</script>

其中，更换验证码的a标签和后端API接口的地址需要根据自己的需求进行修改。此代码通过jQuery中的$.ajax()方法完成向后端发送数据的操作，其中url参数为后端接口地址，type参数为请求类型，data参数为请求所需要携带的数据，dataType参数为返回数据的类型，success参数为请求成功后的回调函数，error参数为请求失败后的回调函数。

4. 编写后端接口

前端代码已完成，我们需要在后端实现登录的校验逻辑。以下是Django框架的一段示例代码：

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
import random

# 随机生成4位验证码
def generate_captcha():
    captcha = ''
    for i in range(4):
        captcha += str(random.randint(0, 9))
    return captcha

# 获取验证码图片的接口
def get_captcha(request):
    captcha = generate_captcha()
    request.session['captcha'] = captcha
    return JsonResponse({'captcha': captcha})

# 登录校验的接口
@csrf_exempt
def user_login(request):
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')
        captcha = request.POST.get('captcha')
        session_captcha = request.session.get('captcha')
        if captcha.lower() == session_captcha.lower():
            # 验证码正确，进行用户名密码的校验
            user = authenticate(username=username, password=password)
            if user is not None:
                login(request, user)
                return JsonResponse({'code': 0, 'msg': '登陆成功！'})
            else:
                return JsonResponse({'code': 1, 'msg': '用户名或密码错误，请重新输入！'})
        else:
            return JsonResponse({'code': 2, 'msg': '验证码错误，请重新输入！'})

其中，generate_captcha()函数用于随机生成4位验证码，并将其存储在session中，get_captcha()函数用于生成验证码图片的接口，user_login()函数用于实现登录校验的接口，其中使用Django内置的User模型进行用户名密码的校验，则需要在视图函数中进行导包，即from django.contrib.auth import authenticate, login。

总的来说，Bootstrap实现登录校验表单(带验证码)需要借助jQuery和后端代码的支持，需要在前端完成HTML结构和JS代码的编写，后端完成验证码和登录校验的逻辑实现。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap实现登录校验表单(带验证码) - Python技术站

Bootstrap实现登录校验表单(带验证码)

1. 引入Bootstrap和jQuery库

2. 编写HTML结构

3. 编写JavaScript代码

4. 编写后端接口

相关文章