html+JS+php实现简单的注册用户名验证

最新推荐文章于 2024-04-26 17:21:31 发布
最新推荐文章于 2024-04-26 17:21:31 发布
阅读量908 收藏 2
点赞数 1
文章标签： php javascript 前端 ViewUI
原文链接：https://yq.aliyun.com/articles/646512
版权

初学使用,不废话
1、index.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>注册用户</title>
    <script type="text/javascript" src="post_ajax.js"></script>
</head>
<body>
    <h1>注册用户</h1>
    <input type="text" name="userName" id="bt_user" onblur="postajax()"/><label id="lb_text" style="display:none"></label>

</body>
</html>

2、post_ajax.js

function postajax(){
      //XMLHttpRequest创建异步对象
      var ajax = new XMLHttpRequest();
      //设置请求的php的url和参数
      ajax.open('post','post_ajax.php');
      //需要POST 数据，使用 setRequestHeader() 来添加 HTTP 头
      ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      // send发送请求
      ajax.send('Name='+document.querySelector('#bt_user').value);
      //事件注册
      ajax.onreadystatechange = function(){
        if (ajax.readyState ==4&&ajax.status==200) {
            //返回接收的内容并修改数据
            console.log(ajax.responseText);
            var show = document.querySelector('#lb_text');
                show.style.display='block';
            if (ajax.responseText =="OK") {
                show.innerHTML='提示：该用户已经注册了！'
            } else{
                show.innerHTML='提示：你可以使用该名字！'
            }
        }
      };
    }

3、post_ajax.php

<?php
    header('content-type:text/html;charset=utf-8');
    $name=$_POST['Name'];
    //对比是数据可以通过数据库获取，并验证
    $nameArray = array('熊大',"熊二",'张三','李四','王五');
    $result=in_array($name, $nameArray);
    // 返回判定值给调用者
    if($result){
        echo "OK";
    } else{
        echo "not OK";
    }
?>
weixin_34101784
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
PHP+MySQL+JavaScript实现用户注册系统
Elo的博客
07-18 2296
以下是用户注册界面： 其中，检查用户名用来检查是否该用户名已被注册 点击检查用户名将弹出窗口提示是否已被注册 未被注册时要弹出的界面: 用户名已被注册时弹出的界面: 各个属性在MySQL中的类型   基本思路就是在这个表单中将填写的内容传到JavaScript, 然后JavaScript中使用window.open()函数调用php文件检验用户名是否已被注册. 代码...
php连接数据库实现登录，注册，注册带JS验证
12-19
php连接数据库实现登录，注册，注册带JS验证 简单明了，易于初学者！
用户注册验证 js常用的验证代码
08-23
用户注册验证常用的js代码用户注册验证常用的js代码用户注册验证常用的js代码用户注册验证常用的js代码用户注册验证常用的js代码用户注册验证常用的js代码
HTML与JavaScript实现注册页面
我的主页
04-03 4393
本期讲解:JavaScript与HTML结合实现注册页面，主要通过JavaScript点击事件以及HTML表单来实现。
js实现登陆注册
最新发布
2302_80798583的博客
04-26 766
【代码】js实现登陆注册。
PHP+Mysql+Ajax实现注册时用户名验证
03-23
以上就是使用PHP、MySQL和Ajax实现注册时用户名验证的基本流程。实际应用中，还需要考虑安全问题，如SQL注入防护（使用预编译的SQL语句）、XSS攻击防御以及错误处理等。同时，为了提高用户体验，还可以添加一些额外...
HTML+CSS+ajax+php+mysql实现登录
09-30
在这个项目中，`js`文件夹中的JavaScript代码（如`ajax.js`）可能包含了使用`XMLHttpRequest`对象实现异步通信的函数，当用户点击登录按钮时，会通过Ajax发送请求到服务器验证用户名和密码。 4. **PHP**：PHP是一种...
PHP+Mysql+Ajax注册时用户名验证
03-23
本教程将详细讲解如何使用PHP、MySQL和Ajax技术实现这一功能，以实现即时、无刷新的用户名验证。 **PHP** 是一种广泛使用的服务器端脚本语言，特别适用于Web开发。在本场景中，PHP将作为后端处理程序，负责与数据库...
PHP+JavaScript+HTML实现注册界面表单及日历控件1
08-03
【PHP+JavaScript+HTML实现注册界面表单及日历控件】 在网页开发中，创建一个用户注册界面是常见的需求，通常涉及到HTML用于构建页面结构，JavaScript进行客户端验证，以及PHP处理服务器端的数据交互。本篇文章将...
Jquery+ajax+php+mysql数据库实现用户注册登录
04-06
在本项目中，"Jquery+ajax+php+mysql数据库实现用户注册登录"是一个典型的Web应用程序开发案例，它涵盖了前端交互、后端处理以及数据库管理等多个方面。以下将详细阐述这些知识点： 1. **Jquery**：Jquery是一个...
JS实现用户注册
tusunjan
09-17 2180
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
PHP+JavaScript+HTML实现注册界面表单及日历控件
weixin_34240520的博客
02-23 567
本文主要是介绍我做PHP网站时的一个HTML的简单静态界面，它的主要功能是用户注册界面，并且参照了网上的例子使用JavaScript判断和My97DatePicker的日历控件。界面效果如下图所示： 同时插入数据库显示效果如下图所示： 可以看到引用My97DatePicker的日历控件及判断效果如下图...
JavaScript、CSS、HTML 实现用户注册页面与信息校验
热门推荐
胡根得 天行健，君子以自强不息。
12-12 4万+
需求：实现用户注册页面并作出逻辑校验。要求： 　　（1）完成注册页面样式如下： 　　（2）页面提交，用户注册信息不符合规范，要显示红色提示框，如下： 　　（3）页面提交，用户注册信息不符合规范，要显示绿色提示框，如下： 　　分析：HTML实现页面元素，CSS做页面美化，JavaScript 实现逻辑校验；用户注册规则采用正则表达式。 1、HTML实现注册页面。 　　注：
js实现登陆与注册
baogeprh的博客
07-22 7404
1，首先在phpstudy文件中寻找到一个文件名叫 “www” 的文件 在里面创建html，js，php文件； 2，在Navicat 软件中连接到phpstudy的MySQL； 3，在Navicat 软件中寻找一个数据库 并创建一个表格； 4，书写html代码（如下图1）编写简单的注册表单结构 并通过js 给表单验证；点击注册跳转到php文件中； 5，php代码（如下图2） 首先获取html代码中表单的值 然后查找表单的数据 进行判断 如果用户存在就跳转回到上个html页面 用户名设置成功后...
后台使用php,前台使用html,css,jquery,javascript实现登录注册
lff18277233091的博客
01-22 2647
简单介绍一下注册和登录功能的实现 注册 注册的部分有注册用户名,秘密,确认密码,邮箱,电话号码,注册按钮和点击注册按钮完成注册. 前端部分要做的事情就是用户输入的信息是否正确,格式是否符合 当确定用户输入的信息正确后,客户端会将用户所输入的内容传给服务端.服务端得到的信息后会在进行一次判断信息的格式是否符合要求,无误后将德奥信息与数据库中的信息做对比,如有重复则会提示前端该用户名,手机号,邮箱...
html+js手机号获取验证码功能实现
lxrpatient的博客
02-27 8019
1.找可靠的平台获得接口，我选择的是网易易盾（以下基于该平台实现），有100次的验证码发送机会。 2.找到平台，https://dun.163.com/ 3.根据官方的示例代码，调试运行通过之后，更改代码。因为示例代码是用纯java或者python或者php写的，而我们往往需要把发送验证码作为一个接口，前端需要html传入数据。另外还要根据示例代码下载好相关的依赖，示例代码里面都有，直接放在自己...
html+表单+js+后端实现用户注册登
06-08
陆流程 1. 创建注册页面，使用HTML表单，包含用户名、密码、确认密码、邮箱等输入框，并在表单中添加一个提交按钮。 2. 使用JavaScript验证表单输入内容的合法性，例如用户名和密码是否符合要求、两次密码是否一致等。 3. 在后端使用某种编程语言（例如PHP、Python、Java等）编写处理表单提交的代码，将用户输入的信息存储到数据库中。 4. 在注册成功后，返回给用户一个提示信息，告知注册成功并跳转到登录页面。 具体实现步骤如下： 1. HTML表单代码 ```html <form action="register.php" method="post"> <label>用户名：</label> <input type="text" name="username" required> <br> <label>密码：</label> <input type="password" name="password" required> <br> <label>确认密码：</label> <input type="password" name="confirm_password" required> <br> <label>邮箱：</label> <input type="email" name="email" required> <br> <input type="submit" value="注册"> </form> ``` 2. JavaScript表单验证代码 ```javascript var form = document.querySelector('form'); var password = document.getElementsByName('password')[0]; var confirm_password = document.getElementsByName('confirm_password')[0]; var email = document.getElementsByName('email')[0]; form.addEventListener('submit', function(event) { if (password.value.length < 6) { alert('密码长度不能小于6位'); event.preventDefault(); return false; } if (password.value !== confirm_password.value) { alert('两次输入的密码不一致'); event.preventDefault(); return false; } if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email.value)) { alert('邮箱格式错误'); event.preventDefault(); return false; } }); ``` 3. 后端处理表单提交的代码（以PHP为例） ```php <?php // 连接数据库 $conn = mysqli_connect('localhost', 'root', 'password', 'database_name'); if (!$conn) { die('连接数据库失败：' . mysqli_connect_error()); } // 处理表单提交 if ($_SERVER['REQUEST_METHOD'] === 'POST') { $username = $_POST['username']; $password = $_POST['password']; $email = $_POST['email']; // 查询用户名是否已存在 $sql = "SELECT * FROM users WHERE username = '$username'"; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) > 0) { echo '用户名已存在'; } else { // 插入用户数据到数据库 $sql = "INSERT INTO users (username, password, email) VALUES ('$username', '$password', '$email')"; if (mysqli_query($conn, $sql)) { echo '注册成功'; // 跳转到登录页面 header('Location: login.php'); } else { echo '注册失败：' . mysqli_error($conn); } } } // 关闭数据库连接 mysqli_close($conn); ?> ``` 4. 注册成功后返回提示信息并跳转到登录页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值