如何通过HTML的onBlur事件调用Flask后端函数实现用户名校验

嘿，作为Flask新手能想到做实时用户名校验，这个思路很棒！要实现你说的功能，咱们得把前端交互和后端数据库查询结合起来，我给你拆解成几个步骤：

第一步：后端添加用户名校验API #

首先得在你的Flask应用里新增一个接口，专门用来接收前端的用户名，去MongoDB里查询是否已存在。假设你已经配置好了MongoDB连接，代码大概是这样：

from flask import Flask, request, jsonify
from pymongo import MongoClient

# 替换成你自己的MongoDB连接信息
client = MongoClient('mongodb://localhost:27017/')
db = client['your_db_name']  # 你的数据库名称
users_col = db['users']      # 存储用户数据的集合名称

@app.route('/check-username', methods=['POST'])
def check_username():
    # 获取前端传过来的用户名
    username = request.json.get('username', '').strip()
    if not username:
        return jsonify({'available': False})
    
    # 查询数据库中是否存在该用户名
    existing_user = users_col.find_one({'username': username})
    if existing_user:
        # 用户名已被占用
        return jsonify({'available': False})
    else:
        # 用户名可用
        return jsonify({'available': True})

第二步：修改前端交互逻辑 #

接下来要调整你的模板代码，更新NameCheck()函数，让它通过异步请求调用上面的后端接口，然后根据返回结果切换Font Awesome图标的样式和显示状态：

{% extends 'layout.html' %} {% block body %} 
<div class="container">
  <form method="post" action="{{ url_for('signup') }}">
    <label for="user">Username </label>
    <input type="text" id="user" name="user" onblur='NameCheck()'>
    <!-- 先默认隐藏图标，后续根据校验结果显示 -->
    <i id='acceptIC' class="fas" style="display: none; margin-left: 8px;"></i>
    
    <label for="pas">Password </label>
    <input type="password" id="pas" name="pas">
    
    <label for="mail">Email ID </label>
    <input type="email" id="mail" name="mail">
    
    <button type="submit">Signup</button>
  </form>
</div>

<script>
async function NameCheck() {
  const usernameInput = document.getElementById('user');
  const username = usernameInput.value.trim();
  const statusIcon = document.getElementById('acceptIC');

  // 如果用户没输入内容，直接隐藏图标
  if (!username) {
    statusIcon.style.display = 'none';
    return;
  }

  try {
    // 发送请求到后端校验接口
    const response = await fetch('/check-username', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ username: username })
    });

    const result = await response.json();

    if (result.available) {
      // 用户名可用：显示绿色对勾
      statusIcon.className = 'fas fa-check-circle';
      statusIcon.style.color = '#2ecc71';
      statusIcon.style.display = 'inline-block';
    } else {
      // 用户名已存在：显示红色叉号
      statusIcon.className = 'fas fa-times-circle';
      statusIcon.style.color = '#e74c3c';
      statusIcon.style.display = 'inline-block';
    }
  } catch (err) {
    console.error('校验用户名时出错:', err);
    // 请求失败时显示警告图标
    statusIcon.className = 'fas fa-exclamation-circle';
    statusIcon.style.color = '#f39c12';
    statusIcon.style.display = 'inline-block';
  }
}
</script>
{% endblock %}

第三步：一些优化建议（可选） #

• 可以把样式写到CSS文件里，避免内联样式：

  #acceptIC {
    margin-left: 8px;
    vertical-align: middle;
    font-size: 1.2em;
  }
  

• 除了onblur，还可以加oninput事件，让用户输入过程中就实时校验，提升体验
• 生产环境记得开启CSRF保护，如果你用Flask-WTF的话，要给fetch请求带上CSRF令牌
• 可以给输入框加一点反馈，比如用户名已存在时给输入框加红色边框

内容的提问来源于stack exchange，提问作者Bhaskar