1.使用jquery+ajax完成注册时的用户名验证,要求如下:
(1)前端验证用户名是否合法,账号只能是长度4-12位的数字、字母、下划线
(2)如果用户名合法,通过ajax访问后台验证用户名是否已存在,并给前台作出相应的提示
如果用户名不合法或者已存在,点击注册按钮无法提交表单。
前端验证:
let username = $("#username").val();
if (username.test("/^[\w]{4,12}$/")) {
// 继续提交
} else {
alert("账号只能是长度为4-12位的数字,字母或下划线");
}
后台则要看不同的语言的,大致逻辑都是根据用户名查询数据库是否存在用户信息,如果存在则返回存在标识,前端根据存在标识判断(也可以通过返回HTTP错误码的形式判断):
在判断的过程如果不存在用户时可以直接将用户信息写入数据库完成注册并返回用户信息和存在标识为不存在
$.ajax({
url: "判断路径",
success: response => {
if (response.isExistsUsername) {
alert("当前用户已存在")
} else {
alert("继续其他操作")
}
}
})
这是前端的代码:
$(document).ready(function() {
$("#username").blur(function() {
var username = $("#username").val();
var reg = /^[a-zA-Z0-9_]{4,12}$/;
if (!reg.test(username)) {
$("#username_tips").html("用户名不合法");
} else {
$.ajax({
type: "post",
url: "check_username.php",
data: {
username: username
},
dataType: "text",
success: function(result) {
if (result === "0") {
$("#username_tips").html("用户名已存在");
} else {
$("#username_tips").html("用户名可以使用");
}
}
});
}
});
});
后端的代码(check_username.php):
<?php
$username = $_POST['username'];
// 数据库连接代码省略
$sql = "SELECT * FROM user WHERE username = '$username'";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
echo "0";
} else {
echo "1";
}
?>
这是一个简单的实现方式,可以作为参考。