【PHP【实战版】系统性学习】——登录注册页面的教程,让编写PHP注册变成一个简单的事情

在这里插入图片描述


👨‍💻个人主页:@开发者-曼亿点

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 曼亿点 原创

👨‍💻 收录于专栏:PHP程序开发

🅰

请添加图片描述


文章目录

    • 🅰
    • 前言
    • 🎶一、AJAX表单验证
    • 🎶二、手机与邮箱验证
    • 🎶三、将数据写入数据库
    • 🎶(4)模型的查询修改删除操作
        • 结束语🥇


前言

  在Web开发中,表单是用户与网站进行交互的主要方式之一。然而,用户提交的表单数据需要经过验证,以确保数据的完整性、安全性和合法性。PHP作为一种强大的服务器端脚本语言,提供了丰富的工具和函数来实现表单验证。
本文将介绍如何使用PHP对表单数据进行验证,包括验证必填字段、验证邮箱、验证密码、验证数字等常见场景。我们将探讨各种验证技术和最佳实践,以确保您的表单在用户提交之前可以正确验证并返回友好的错误提示信息。
  通过本文的学习,您将掌握PHP表单验证的基础知识,并能够应用这些知识来构建安全可靠的Web应用程序。无论您是初学者还是有一定经验的开发人员,本文都将为您提供有关PHP表单验证的全面指南,帮助您提升Web开发的技能水平。


🎶一、AJAX表单验证


  使用WeUI前端UI框架对其项目进行编写,在UI框架中找到一个合适的登录页面,并进行重新的命名。因为表单提交将会进行页面跳转,因此修改表单提交的方式,改为按钮的提交方式。
给手机输入框和邮箱输入框添加oninput事件,oninput事件在输入框的值发展改变时触发。在手机输入框和邮箱输入框中插入错误提示标签,当输入的手机和邮箱不符合规定时,给出相应的提示,让注册用户立即进行修改,提供用户的体验感。

(1)AJAX表单验证代码展示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!-- 让网页的宽度自动适应手机屏幕的宽度 --><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"><title>用户注册</title><!-- 引入 本地 css文件 --><link rel="stylesheet" href="css/weui.css"/><link rel="stylesheet" href="jquery-confirm/jquery-confirm.css"/><!-- 引入本地js文件 --><script src="js/jquery-3.6.1.min.js"></script><script src="jquery-confirm/jquery-confirm.js"></script></head><body><form class="weui-form" id="reg_form"><div class="weui-form__text-area"><h2 class="weui-form__title">用户注册</h2></div><div class="weui-form__control-area"><div class="weui-cells__group weui-cells__group_form"><div class="weui-cells"><label class="weui-cell"><div class="weui-cell__hd"><span class="weui-label">手机</span></div><div class="weui-cell__bd"><input class="weui-input" name="tel" placeholder="填写本人手机号" oninput="change('tel')"/></div></label><div class="cells__tips" id="tel_tip"style="padding-left:16px;color:red;font-size:12px" >请输入11位手机号码</div><label class="weui-cell"><div class="weui-cell__hd"><span class="weui-label">邮箱</span></div><div class="weui-cell__bd"><input class="weui-input" name="email" placeholder="填写本人邮箱"  oninput="change('email')"/></div></label><div class="c                                                                ells__tips" id="email_tip"style="padding-left:16px;color:red;font-size:12px" >请输入正确的邮箱格式</div><label class="weui-cell"><div class="weui-cell__hd"><span class="weui-label">姓名</span></div><div class="weui-cell__bd"><input class="weui-input" name="name" placeholder="填写本人姓名" /></div></label><label class="weui-cell"><div class="weui-cell__hd"><span class="weui-label">密码</span></div><div class="weui-cell__bd"><input class="weui-input" name="password" placeholder="填写六位密码" type="password" /></div></label><label class="weui-cell"><div class="weui-cell__hd"><span class="weui-label">确认密码</span></div><div class="weui-cell__bd"><input class="weui-input" name="repassword" placeholder="请再次输入六位密码"  type="password" /></div></label></div></div></div><div class="weui-form__tips-area"></div> <!-- 表单提示 --><div class="weui-form__opr-area"><button type="button" class="weui-btn weui-btn_primary" onclick="reg()">立即注册</button></div></form><script>// 通过进行验证function change(type){if(type=='tel'){//进行号码验证var tel=$('#reg_form input[name=tel]').val();if(tel.length==11){//去数据库中进行验证,该验证号码是否存在(异步提交,通过ajax来进行数据库查询,并且获得返回值)$.get("chackTel.php",//URL,表单内容的目的地{'tel':tel},//参数function(res) {//回调函数,提交表单后的结果var obj=$.parseJSON(res);//将结果进行转换$("#tel_tip").html(obj.msg);}   );}}else if(type=='email'){//进行邮箱验证var email=$('#reg_form input[name=email]').val();var index1=email.indexOf('@');var index2=email.indexOf('.');if(index1>=2&&index2>index1+1){$.get("chackTel.php",{'email':email},//参数function(res) {//回调函数,提交表单后的结果var obj=$.parseJSON(res);//将结果进行转换$("#email_tip").html(obj.msg);}  );}else{$('#email_tip').html('请输入正确的邮箱格式');}}}</script></body>
</html>

运行的效果图如下:
在这里插入图片描述


🎶二、手机与邮箱验证


  手机和邮箱验证输入框只要满足JavaScript的验证,就会发生AJAX GET请求,同时将手机和邮箱输入框中的值发送到指定chackTel.php文件,此文件主要获取手机号或邮箱,然后与数据库进行交互,判断是否电话或邮箱被注册,并将返回的结果返回给前端调用页面register.php,前端页面获取返回的数据进行转换,并将结果显示在提示中。
(2)手机和邮箱验证的代码如下:

<?php 
// 接收我们的注册页面,将电话号码到数据库进行验证
$conn=mysqli_connect("localhost","root","123456","shop");
$obj=array("success"=>false,"msg"=>"验证失败");//用户存放处理结果
if(isset($_GET['tel'])){$tel=$_GET['tel'];$sql="select * from users where tel='$tel'";$rs=mysqli_query($conn,$sql);//执行sql文并获取返回结果$rows=mysqli_num_rows($rs);//将结果集转换为行数if($rows>0){$obj=array("success"=>false,"msg"=>"该电话号码已经注册");}else{$obj=array("success"=>true,"msg"=>" ");}//处理结果的返回echo json_encode($obj);
}else if(isset($_GET['email']))
{$email=$_GET['email'];$sql="select * from users where email='$email'";$rs=mysqli_query($conn,$sql);//执行sql文并获取返回结果if(mysqli_num_rows($rs)!=0){$obj=array("success"=>false,"msg"=>"存在相同的邮箱");}else{$obj=array("success"=>true,"msg"=>" ");}//处理结果的返回echo json_encode($obj);
}
?>

运行效果图如下:
在这里插入图片描述



🎶三、将数据写入数据库


  将注册用户填写的信息通过AJAX POST提交到指定的PHP文件,PHP文件获取POST中的数据,并使用数据生成一条MySQL 增加语句,执行增加语句后,返回JSON数据给前端页面,前端首页根据返回的数据弹出提示消息。
首先,在register.php中添加一个reg方法,此方法在注册按钮中进行了绑定。reg方法使用了AJAX POST方法提交注册信息,需要注意的是,确实密码可以在JavaScript中进行验证,因此提交到后台PHP中只需一个密码即可。

(3)增加提交方法reg

<script>// 通过进行验证function change(type){if(type=='tel'){//进行号码验证var tel=$('#reg_form input[name=tel]').val();if(tel.length==11){//去数据库中进行验证,该验证号码是否存在(异步提交,通过ajax来进行数据库查询,并且获得返回值)$.get("chackTel.php",//URL,表单内容的目的地{'tel':tel},//参数function(res) {//回调函数,提交表单后的结果var obj=$.parseJSON(res);//将结果进行转换$("#tel_tip").html(obj.msg);}   );}}else if(type=='email'){//进行邮箱验证var email=$('#reg_form input[name=email]').val();var index1=email.indexOf('@');var index2=email.indexOf('.');if(index1>=2&&index2>index1+1){$.get("chackTel.php",{'email':email},//参数function(res) {//回调函数,提交表单后的结果var obj=$.parseJSON(res);//将结果进行转换$("#email_tip").html(obj.msg);}  );}else{$('#email_tip').html('请输入正确的邮箱格式');}}}function reg(){//提交注册的方法//获取表单的全部内容var tel=$('#reg_form input[name=tel]').val();var email=$('#reg_form input[name=email]').val();var name=$('#reg_form input[name=name]').val();var pwd=$('#reg_form input[name=password]').val();$.post("register_ok.php",{"name":name,"tel":tel,"email":email,"pwd":pwd},function(res){var obj=$.parseJSON(res);if(obj.success){//注册成功$.confirm({title:'注册提示',content:obj.msg,buttons:{"确认":function(){// $.alert("模拟的登录页面的跳转");window.location='del.php';}}});}});}</script>

(4)注册接口

<?php
//接收注册页面中表单的全部内容,插入到数据库中,完成整个注册功能
$conn=mysqli_connect("localhost","root","123456","shop");
$obj=array("success"=>false,"msg"=>"注册失败,请重试");//用户存放处理结果//取得全部数据
$data=$_POST;
$name=$data['name'];
$tel=$data['tel'];
$email=$data['email'];
$pwd=$data['pwd'];
$md5=md5($pwd);
$sql="insert into users(name,tel,email,pwd) values('$name','$tel','$email','$md5')";
$rs=mysqli_query($conn,$sql);
if($rs){$obj=array("success"=>true,"msg"=>"注册成功");
}
echo json_encode($obj);
?>

运行效果图如下:
在这里插入图片描述

🎶(4)模型的查询修改删除操作

结束语🥇

以上就是PHP程序设计
持续更新PHP程序设计教程,欢迎大家订阅系列专栏🔥PHP程序开发你们的支持就是曼亿点创作的动力💖💖💖
请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/325165.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

最美博客POETIZE个人博客系统源码

源码说明&#xff1a; POETIZE个人博客系统源码 | 最美博客 这是一个基于SpringBoot、Vue2和Vue3的开源项目&#xff0c;支持移动端自适应&#xff0c;并具备完善的前台和后台管理功能。 网站分为两个模块&#xff1a; 1. 博客系统&#xff1a;包括文章、表白墙、图片墙、收…

SpringBoot实现图片验证码

引入依赖 <dependency><groupId>com.github.whvcse</groupId><artifactId>easy-captcha</artifactId><version>1.6.2</version> </dependency>代码实现 package com.qiangesoft.captcha.controller;import com.wf.captcha.*…

【Linux】基础命令:进程、网络

systemctl命令 控制内置服务 systemctl start | stop | status | enable | disable 服务名 start | stop开启关闭&#xff0c;status状态&#xff0c;enable | disable开启关闭开机自启 date命令 查看系统时间 date [-d] [格式化字符串] date -d “1 day” %Y-%m-%d 修改时区…

Stable Diffusion:AI绘画的新纪元

摘要&#xff1a; Stable Diffusion&#xff08;SD&#xff09;作为AI绘画领域的新星&#xff0c;以其开源免费、强大的生成能力和高度的自定义性&#xff0c;正在引领一场艺术与技术的革命。本文旨在为读者提供Stable Diffusion的全面介绍&#xff0c;包括其原理、核心组件、安…

链表的经典面试题(数据结构详解)+顺序表和链表之间区别+计算机存储体系

前言 首先这里已经正式步入数据结构的知识&#xff0c;之前我们已经讲解了链表的使用&#xff0c;接下来我们需要的就是大量的练习&#xff0c;熟练掌握数据结构。下面的题型我们选择的都是链表的经典题型&#xff0c;面试题型&#xff0c;包含快慢指针&#xff0c;数形结合&am…

【qt】设计器实现界面

设计器实现界面 一.总体思路二.具体操作1.创建项目2.粗略拖放3.水平布局4.垂直布局5.修改名字6.转到槽7.实现槽函数 一.总体思路 创建项目粗略拖放水平布局垂直布局修改名称转到槽实现槽函数 二.具体操作 1.创建项目 这次咱们一定要勾选Generate form哦。 因为我们要使用设…

R语言数据探索与分析-碳排放分析预测

# 安装和加载需要的包 install.packages("readxl") install.packages("forecast") install.packages("ggplot2") library(readxl) library(forecast) library(ggplot2)# 数据加载和预处理 data <- read_excel("全年数据.xlsx") co…

感知机和神经网络

引入 什么是神经网络&#xff1f; 我们今天学习的神经网络&#xff0c;不是人或动物的神经网络&#xff0c;但是又是模仿人和动物的神经网络而定制的神经系统&#xff0c;特别是大脑和神经中枢&#xff0c;定制的系统是一种数学模型或计算机模型&#xff0c;神经网络由大量的人…

FANUC机器人工具坐标偏移的用法

一、工具坐标偏移的使用场景 在机器人位置不改变的情况下&#xff0c;工业机器人使用默认工具坐标系示教的一系列运动点位&#xff0c;要保持原本点位位置不变的情况下&#xff0c;改变机器人工具坐标的参数&#xff0c;就要用到机器人坐标转化的功能。在FANUC机器人上体现为机…

通过mvn archetype 创建一个spring boot start 工程

mvn archetype https://maven.apache.org/archetype/index.html 遇到的问题 对于想自定义一个spring-boot-start的同学,比如 Springboot自定义Starter启动器 整个过程很繁琐。 定义属性开关增加 spring boot test start插件定义自动装载 spring.factories or org.springfra…

关于一致性,你该知道的事儿(上)

关于一致性&#xff0c;你该知道的事儿&#xff08;上&#xff09; 前言一、缓存一致性二、内存模型一致性三、事务一致性四、分布式事务一致性4.1 分布式系统的一些挑战4.2 关于副本的一些概念4.3 分布式事务之共识问题4. 3.1 PC(two-phase commit, 2PC)4.3.2 Raft 三、后记参…

【牛客】SQL201 查找薪水记录超过15条的员工号emp_no以及其对应的记录次数t

1、描述 有一个薪水表&#xff0c;salaries简况如下&#xff1a; 请你查找薪水记录超过15条的员工号emp_no以及其对应的记录次数t&#xff0c;以上例子输出如下&#xff1a; 2、题目建表 drop table if exists salaries ; CREATE TABLE salaries ( emp_no int(11) NOT N…

python数据分析——pandas数据结构2

参考资料&#xff1a;活用pandas库 导入基础数据 # 导入库 import pandas as pd # 读取数据集 dfpd.read_csv(r"..\data\scientists.csv") df.head() 1、DataFrame DataFrame是Pandas中最常见的对象。可以把它看作python存储电子表格式数据的方式。Series数据结构…

基于单片机的温度控制系统设计(51基础版)-设计说明书

本论文设计了一种基于51单片机的温度控制系统&#xff0c;该系统具备以下主要功能&#xff1a;首先&#xff0c;通过温度传感器实时检测环境温湿度&#xff0c;以获取准确的温度数值。其次&#xff0c;通过按键设置温度阈值&#xff0c;用户可以根据需求自行调整控制温度的上限…

Dragonfly 拓扑的路由算法

Dragonfly 拓扑的路由算法 1. Dragonfly 上的路由 (1)最小路由(2)非最小路由 2. 评估3. 存在问题 (1)吞吐量限制(2)较高的中间延迟 references Dragonfly 拓扑的路由算法 John Kim, William J. Dally 等人在 2008 年的 ISCA 中提出技术驱动、高度可扩展的 Dragonfly 拓扑。而…

杰发科技AC7801——ADC之Bandgap和内部温度计算

0. 参考 电流模架构Bandgap设计与仿真 bandgap的理解&#xff08;内部带隙电压基准&#xff09; ​ ​ 虽然看不懂这些公式&#xff0c;但是比较重要的一句应该是这个&#xff1a;因为传统带隙基准的输出值为1.2V ​ 1. 使用 参考示例代码。 40002000是falsh控制器寄…

从离线到实时:无锡锡商银行基于 Apache Doris 的数据仓库演进实践

作者&#xff1a;武基鹏&#xff0c;无锡锡商银行 大数据技术经理 编辑整理&#xff1a;SelectDB 技术团队 导读&#xff1a;为实现数据资产的价值转化以及全面数字化、智能化的风险管理&#xff0c;无锡锡商银行大数据平台经历从 Hive 离线数据仓库到 Apache Doris 实时数据仓…

鸿蒙ArkUI-X跨平台开发电商应用

一、ArkUI-X 简介 ArkUI-X 是由 OpenHarmony TSC - 跨平台应用开发框架 TSG 所孵化的开源项目,使用ArkUI-X可以让开发者基于一套主代码, 就可以构建支持多平台的精美、高性能应用。目前支持OpenHarmony、HarmonyOS、Android、 iOS,后续会逐步增加更多平台支持。 ArKUI跨平台…

经典权限五张表功能实现

文章目录 用户模块(未使用框架)查询功能实现步骤代码 新增功能实现步骤代码 修改功能实现步骤代码实现 删除功能实现步骤代码实现 用户模块会了&#xff0c;其他两个模块与其类似 用户模块(未使用框架) 查询功能 这里将模糊查询和分页查询写在一起 实现步骤 前端&#xff1…

哈希表(unordered_set、unordered_map)

文章目录 一、unordered_set、unordered_map的介绍二、哈希表的建立方法2.1闭散列2.2开散列&#xff08;哈希桶/拉链法&#xff09; 三、闭散列代码&#xff08;除留余数法&#xff09;四、开散列代码&#xff08;拉链法/哈希桶&#xff09; 一、unordered_set、unordered_map的…