ajax校验手机号是否已注册demo

下面是一个使用ajax校验手机号是否已注册的demo，前提是需要有一个后端接口返回手机号是否已被注册。

HTML代码：

<form>
  <label for="phone">手机号：</label>
  <input type="text" id="phone" name="phone" required>
  <div id="phone-error" class="error"></div>
  <button type="submit">提交</button>
</form>

JavaScript代码：

$(document).ready(function() {
  // 监听表单提交事件
  $('form').submit(function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    // 获取表单数据
    var phone = $('#phone').val();

    // 发送ajax请求
    $.ajax({
      url: '/check_phone', // 后端接口地址
      type: 'POST',
      dataType: 'json',
      data: {
        phone: phone
      },
      success: function(data) {
        if (data.is_registered) {
          // 手机号已被注册
          $('#phone-error').text('手机号已被注册');
        } else {
          // 手机号未被注册，可以提交表单
          $('form')[0].submit();
        }
      },
      error: function(xhr, status, error) {
        // ajax请求失败
        console.log('ajax请求失败：', error);
      }
    });
  });
});

在后端接口中，可以从请求参数中获取手机号，然后查询数据库中是否已有该手机号的记录，再将查询结果返回给前端。注意要返回一个JSON格式的数据，示例代码如下：

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/check_phone', methods=['POST'])
def check_phone():
    phone = request.form.get('phone')
    is_registered = False  # 假设手机号未被注册
    # TODO: 查询数据库中是否已有该手机号的记录
    # 如果已有记录，则将 is_registered 设置为 True
    return jsonify({'is_registered': is_registered})

以上代码仅供参考，实际使用时需要根据具体情况进行调整。