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

news2024/9/21 16:26:58

在这里插入图片描述


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

👨‍💻 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.coloradmin.cn/o/1666435.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Oracle SQL优化案例-查询Null值走索引

网友发来一个SQL&#xff0c;说他们公司的一个SQL要优化帮忙看一下&#xff0c;执行计划如下&#xff1a; -------------------------------------SELECT * FROM (SELECT * FROM TXS C WHERE C.A ISNULL OR C.A ORDER BY ID_TXS DESC) WHERE ROWNUM<100​---------------…

集成平台建设方案(大数据中台技术方案)—Word原件

基础支撑平台主要承担系统总体架构与各个应用子系统的交互&#xff0c;第三方系统与总体架构的交互。需要满足内部业务在该平台的基础上&#xff0c;实现平台对于子系统的可扩展性。基于以上分析对基础支撑平台&#xff0c;提出了以下要求&#xff1a; 基于平台的基础架构&…

arm架构下安装conda

一、参考文章&#xff1a;感谢这位网友的分享&#xff0c;搬过来以备过几天使用&#xff0c;这种小众系统真的有些麻烦解决方案&#xff1a;ARM架构下安装Miniconda 离线配置Conda环境的全流程及踩坑避坑指南 - 技术栈 二、步骤 2.1 确认系统架构 uname -m 2.2 根据架构下载…

云贝教育 |【直播课】5月19日Oracle 19c OCM认证大师课 即将上课了!(附课件预览)

贝教育独家认证课OCM全网价格最低&#xff0c;性价比最高&#xff01;&#xff01;&#xff01; Oracle 19c OCM认证大师培训 - 课程体系 - 云贝教育 (yunbee.net) OCM部分课件预览 Oracle Database 19c Certified Master Exam (OCM) 认证大师 25 天 / 150课时 什么是Oracle 1…

浅析vue3自定义指令

vue3中可以像下面这样使用自定义指令。 这里我们只是定义了一个vFoucs变量&#xff0c;vue怎么知道这是一个指令呢&#xff1f; 这是因为约定大于配置&#xff0c;vue3中有这样一个约定&#xff08;截图来自官方文档&#xff09;&#xff1a; 注意这里说的是驼峰命令&#x…

插入法(直接/二分/希尔)

//稳定耗时&#xff1a; 双向冒泡&#xff0c;可指定最大最小值个数MaxMinNum<nsizeof(Arr)/sizeof(Arr[0]), void BiBubbleSort(int Arr[],int n&#xff0c;int MaxMinNum){int left0,rightn-1;int i;bool notDone true;int temp;int minPos;while(left<right&&am…

《Linux运维总结:ARM64架构CPU基于docker-compose一离线部署rabbitmq 3.10.25容器版镜像模式集群》

总结&#xff1a;整理不易&#xff0c;如果对你有帮助&#xff0c;可否点赞关注一下&#xff1f; 更多详细内容请参考&#xff1a;《Linux运维篇&#xff1a;Linux系统运维指南》 一、部署背景 由于业务系统的特殊性&#xff0c;我们需要面向不通的客户安装我们的业务系统&…

情感感知OCR:整合深度学习技术提升文字识别系统的情感理解能力

摘要&#xff1a;随着深度学习技术的发展&#xff0c;文字识别&#xff08;OCR&#xff09;系统在识别准确率和速度上取得了长足的进步。然而&#xff0c;在处理文本时&#xff0c;仅仅依靠字符和词语的识别并不足以满足用户对信息的全面理解需求。本文提出了一种新颖的方法&am…

Navicat 17:先睹为快

官方声明&#xff1a;Navicat 17&#xff08;英文版&#xff09;目前处于测试阶段中&#xff0c;并计划 5 月 13 日发布&#xff01; 如果你觉得 Navicat 16 已经推出很多令人兴奋的新功能&#xff0c;那么这次你可能要好好看看 Navicat 17&#xff0c;本次升级涵盖了更多的内容…

vscode切换分支及合并分支操作教程

工具&#xff1a;gitee、git 、vscode、Git Graph 点击可以看到分支管理明细。 一、前提 1、首先要有两个分支 &#xff08;1&#xff09;分支说明&#xff1a; test&#xff1a; 测试分支 feature/luo-20240508&#xff1a;自己的开发分支 &#xff08;2&#xff09;分支说…

【启明智显分享】国产自主HMI核心板Model3

Model3是一款高性能的工业级HMI&#xff08;人机界面&#xff09;核心板&#xff0c;也是一款纯国产HMI方案&#xff0c;工业级标准&#xff0c;稳定、可靠&#xff1b; 工业级HMI芯片–Model3 纯国产HMI方案 Model3核心板&#xff0c;具有2D加速&#xff0c;PNG解码&…

生产性服务业与生活性服务业如何区分

服务业的兴旺发达是现代经济的显著特征&#xff0c;是经济社会发展的必然趋势&#xff0c;是衡量经济发展现代化、国际化、高端化的重要标志。生产性服务业和生活性服务业是服务业的重要组成部分&#xff0c;是当前中国经济最具活力的产业&#xff0c;也是未来经济发展最具潜力…

【linux-IMX6ULL-定时器-GPT-串口配置流程-思路】

目录 1. 定时器配置流程1.1 EPIT定时器简介1.2 定时器1(epit1)的配置流程1.3 配置代码(寄存器版本)1.4 定时器-配合按键消抖1.4.1 实现原理1.4.2 代码实现&#xff08;寄存器版&#xff09; 2. GPT定时器实现高精度延时2.1 延时原理分析2.2 代码实现 3. UART串口配置流程3.1 UA…

SpringCloudAlibaba:4.2云原生网关higress的基本使用

概述 简介 Higress是基于阿里内部的Envoy Gateway实践沉淀、以开源Istio Envoy为核心构建的下一代云原生网关&#xff0c; 实现了流量网关 微服务网关 安全网关三合一的高集成能力&#xff0c;深度集成Dubbo、Nacos、Sentinel等微服务技术栈 定位 在虚拟化时期的微服务架构…

文本检测模型 DBNet 一种基于分割算法的模型 对每个像素点进行自适应二值化,并将二值化过程与网络训练相结合 可微分二值化模块 概率图

文本检测模型 DBNet DBNet文本检测模型是一种基于分割算法的模型,其优化之处在于对每个像素点进行自适应二值化,并将二值化过程与网络训练相结合。 传统的文本检测方法通常将二值化作为一个后处理步骤,与网络训练分开进行。而DBNet则提出了一种可微分的二值化方法,即将文…

类加载机制(双亲委派机制)

文章目录 JVM的作用是什么双亲委派机制加载流程 JVM的作用是什么 我们运行Java程序时&#xff0c;要安装JDK&#xff0c;JDK包含JVM&#xff0c;不同环境的JDK都是不同的。 Java 代码在编译后会形成 class 的字节码文件&#xff0c;该字节码文件通过 JVM 解释器&#xff0c;生…

【Linux】基于 Jenkins+shell 实现更新服务所需文件 -->两种方式:ssh/Ansible

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…

基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (四)

基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;四&#xff09; 大家继续看 https://lilianweng.github.io/posts/2023-06-23-agent/的文档内容 第三部分&#xff1a;工具使用 工具的使用是人类的一个显着而显着的特征。我们创造、修改和利用外部物体来完成超…

gocator导出图片

想用3D扫描后的图片&#xff0c;但是系统自带的导出方法很麻烦&#xff0c;所以考虑通过sdk导出 首先需要设置点云亮度 这里是导出图片的关键代码 case GoDataMessageType.SurfaceIntensity: { Debug.WriteLine("SurfaceIntensity "); GoSu…

C++ 中的 lambda 表达式

1.概念 lambda表达式实际上是一个匿名类的成员函数&#xff0c;该类由编译器为lambda创建&#xff0c;该函数被隐式地定义为内联。因此&#xff0c;调用lambda表达式相当于直接调用匿名类的operator()函数&#xff0c;这个函数可以被编译器内联优化&#xff08;建议&#xff0…