jquery 验证用户名是否重复代码实例

使用jQuery验证用户名是否重复是一件常见的任务，一般需要使用AJAX异步请求后端API接口来查询数据库中是否已经存在对应的用户名。下面将对此过程进行完整的讲解。

第一步：前端页面编写

首先我们需要在前端页面中添加一个文本框用于用户输入用户名，并添加一个按钮用于触发验证，代码如下：

<label for="username">用户名</label>
<input type="text" id="username" name="username">
<button id="check-username">检查用户名</button>
<p id="username-tips"></p>

其中，id属性用于jQuery选择器选择元素，name属性用于后台获取表单数据，p元素用于显示验证结果。

第二步：编写jQuery代码

接着，在script标签中，我们需要编写jQuery代码来实现验证用户名是否重复的功能。首先需要给按钮添加点击事件，代码如下：

$(function() {
  $('#check-username').on('click', function() {
    var username = $('#username').val().trim(); // 获取输入的用户名并去除空格
    if (username) {
      // TODO: 发送AJAX请求，后续处理略
    } else {
      $('#username-tips').html('用户名不能为空');
    }
  })
})

在点击按钮时，首先获取输入的用户名，并使用trim()方法去除字符串两端的空格。如果用户名不为空，就开始后续的AJAX请求。如果用户名为空，就用html()方法为提示信息赋值。

接下来，我们使用$.ajax()方法发送AJAX请求到后台接口，代码如下：

$(function() {
  $('#check-username').on('click', function() {
    var username = $('#username').val().trim(); // 获取输入的用户名并去除空格
    if (username) {
      $.ajax({
        type: 'POST', // 请求类型
        url: '/api/check-username', // 请求地址
        data: { username: username }, // 发送数据
        dataType: 'json', // 返回数据类型
        success: function(res) { // 成功回调函数
          if (res.exist) {
            $('#username-tips').html('用户名已被注册');
          } else {
            $('#username-tips').html('用户名可用');
          }
        },
        error: function() { // 错误回调函数
          $('#username-tips').html('发生错误，请稍后再试');
        }
      });
    } else {
      $('#username-tips').html('用户名不能为空');
    }
  })
})

在这个方法中，我们指定了请求类型、请求地址、发送数据、返回数据类型、成功回调函数和错误回调函数。如果后台返回结果为exist为true，说明用户名已经被注册，就将提示信息设置为用户名已被注册，否则设置为用户名可用。

第三步：编写后端API接口

最后，我们需要在后端编写API接口，接口接收前端发送的请求，查询数据库中是否已经存在对应的用户名，然后将结果返回给前端。这里给出一个Node.js Express框架的示例代码：

const express = require('express');
const app = express();

app.use(express.json());

app.post('/api/check-username', (req, res) => {
  const { username } = req.body;
  // TODO: 查询数据库判断用户名是否已存在，返回exist字段和布尔值
  // 示例假设查询结果为已存在，返回exist字段为true
  res.json({ exist: true });
});

app.listen(3000, () => console.log('Server started on port 3000'));

这里使用了Express框架，使用app.use(express.json())解析请求体中的JSON数据。在app.post()方法中，接收到前端发送的POST请求，从请求体中获取用户名，然后查询数据库判断该用户名是否已经被注册，返回exist字段和布尔值，示例中为已存在返回true。

示例

参考上面的代码，我们做出了一个示例演示，放在了这个在线演示地址：https://codepen.io/pen/GRoNJRo。可以在这里输入不同的用户名进行验证。

另外，如果你想在上面的代码基础上增加一些提示材料，比如增加验证用户名的规则等，可以考虑参考以下代码：

function validateUsername(username) { // 验证用户名规则
  if (!/^[a-zA-Z0-9_-]{4,16}$/.test(username)) {
    $('#username-tips').html('用户名必须由4-16位字母、数字、下划线或短横线组成');
    return false;
  }
  return true;
}

$(function() {
  $('#check-username').on('click', function() {
    var username = $('#username').val().trim();
    if (validateUsername(username)) { // 进行用户名规则验证
      $.ajax({
        //...
      });
    }
  })
})

在这个代码里，我们增加了一个validateUsername()方法，用于验证用户名符合指定规则（此处为4-16位字母、数字、下划线或短横线的组合）。在验证过程中如果发现不符合要求，就将提示信息设置为用户名必须由4-16位字母、数字、下划线或短横线组成，之后返回false。如果符合要求，返回true，在后续步骤中才会发送AJAX请求。