【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程序开发你们的支持就是曼亿点创作的动力💖💖💖
请添加图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Unity编辑器如何多开同一个项目?

在联网游戏的开发过程中&#xff0c;多开客户端进行联调是再常见不过的需求。但是Unity并不支持编辑器多开同一个项目&#xff0c;每次都得项目打个包(耗时2分钟以上)&#xff0c;然后编辑器开一个进程&#xff0c;exe 再开一个&#xff0c;真的有够XX的。o(╥﹏╥)o没错&#…

如何利用ChatGPT辅助下处理:ENVI、GEE、Python等遥感数据

遥感技术主要通过卫星和飞机从远处观察和测量我们的环境&#xff0c;是理解和监测地球物理、化学和生物系统的基石。ChatGPT是由OpenAI开发的最先进的语言模型&#xff0c;在理解和生成人类语言方面表现出了非凡的能力。本课程重点介绍ChatGPT在遥感中的应用&#xff0c;人工智…

重卡生产流程的可视化管理与优化

重卡车间可视化是一个将车间内部生产流程、设备状态及人员配置直观展现的技术手段&#xff0c;确保制造过程的每个环节都在最优状态下运行。 在重卡制造领域&#xff0c;从底盘组装、车身焊接、涂装到最终的总装和检验&#xff0c;每一个工作过程都至关重要&#xff0c;对于保…

web入门——导航栏

本专栏内容代码来自《响应式web&#xff08;HTML5CSS3Bootstrap&#xff09;》教材。 导航栏 实现代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content&…

基于springboot的代驾管理系统的设计与实现

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…

DI-engine强化学习入门(七)如何自定义神经网络模型

在强化学习中,需要根据决策问题和策略选择合适的神经网络。DI-engine中,神经网络模型可以通过两种方式指定: 使用配置文件中的cfg.policy.model自动生成默认模型。这种方式下,可以在配置文件中指定神经网络的类型(MLP、CNN等)以及超参数(隐层大小、激活函数等),DI-engine会根据…

https://是怎么实现的?

默认的网站建设好后都是http访问模式&#xff0c;这种模式对于纯内容类型的网站来说&#xff0c;没有什么问题&#xff0c;但如果受到中间网络劫持会让网站轻易的跳转钓鱼网站&#xff0c;为避免这种情况下发生&#xff0c;所以传统的网站改为https协议&#xff0c;这种协议自己…

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

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

常见的几种物联网无线组网技术——青创智通

工业物联网解决方案-工业IOT-青创智通 随着物联网技术的不断发展&#xff0c;无线组网技术成为了物联网中不可或缺的一部分。无线组网技术可以使得各种设备之间无需通过有线连接即可进行数据传输和通信&#xff0c;从而提高了设备的灵活性和可扩展性。下面将介绍几种常见的物联…

行业分析---马斯克的Tesla

1 背景 在前面的博文《行业分析---我眼中的Apple Inc.》中&#xff0c;笔者曾介绍过苹果公司的财报和商业。依然本着提升自己看公司的能力&#xff0c;尝试去分析相对熟悉的公司&#xff0c;看懂它的商业。在之前的博客《自动驾驶---Tesla之FSD简介》中&#xff0c;笔者也简单介…

c++父类指针指向子类

有一个常见的c题&#xff0c;就是父类和子类的构造函数和析构函数分别调用顺序&#xff1a; 父类构造函数子类构造函数子类析构函数父类析构函数 以及父类中的函数在子类中重新实现后&#xff0c;父类指针指向子类后&#xff0c;该指针调用的函数是父类中的还是子类中的&…

Doris【部署 01】Linux部署MPP数据库Doris稳定版(下载+安装+连接+测试)

本次安装测试的为稳定版2.0.8官方文档 https://doris.apache.org/zh-CN/docs/2.0/get-starting/quick-start 这个简短的指南将告诉你如何下载 Doris 最新稳定版本&#xff0c;在单节点上安装并运行它&#xff0c;包括创建数据库、数据表、导入数据及查询等。 Linux部署稳定版Do…

简易留言板

目录 前端实现 数据库的使用 创建数据表 创建项目 连接数据库 后端实现 接口定义 持久层 业务逻辑层 控制层 前端代码完善 留言板是一个常见的功能&#xff0c;在本篇文章中&#xff0c;将实现一个简易的留言板&#xff1a; 页面中能够显示所有留言内容&#xff0c…

AI应用案例:新闻文本分类

随着科学技术的不断发展&#xff0c;互联网技术得以快速的发展和普及&#xff0c;并已在各行各业得到了广泛的应用&#xff0c;从中致使了网络上的信息呈现出爆炸式的增长状态&#xff0c;达到了“足不出户&#xff0c;万事皆知”的境况&#xff0c;充分体现了互联网新闻给生活…

深入理解WPF的ResourceDictionary

深入理解WPF的ResourceDictionary 介绍 在WPF中&#xff0c;ResourceDictionary用于集中管理和共享资源&#xff08;如样式、模板、颜色等&#xff09;&#xff0c;从而实现资源的重用和统一管理。本文详细介绍了ResourceDictionary的定义、使用和合并方法。 定义和用法 Res…

设施农业(大棚种植)远程监控系统设计 STM32+51单片机 含pcb 上下位机源码 原理图

目录 摘要 1. 引言 2. 系统方案 3. 系统硬件设计 4. 系统软件设计 5. 系统创新 6. 评测与结论 7、实物图 8、原理图 ​9、程序 10、资料内容 资料下载地址&#xff1a;设施农业(大棚种植)远程监控系统设计 STM3251单片机 含pcb 上下位机源码 原理图 论文 摘要 …

【论文笔记】Training language models to follow instructions with human feedback B部分

Training language models to follow instructions with human feedback B 部分 回顾一下第一代 GPT-1 &#xff1a; 设计思路是 “海量无标记文本进行无监督预训练少量有标签文本有监督微调” 范式&#xff1b;模型架构是基于 Transformer 的叠加解码器&#xff08;掩码自注意…

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

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

图像分割各种算子算法-可直接使用(Canny、Roberts、Sobel)

Canny算子&#xff1a; import numpy as np import cv2 as cv from matplotlib import pyplot as pltimg cv.imread("../test_1_1.png") edges cv.Canny(img, 100, 200)plt.subplot(121),plt.imshow(img,cmap gray) plt.title(Original Image), plt.xticks([]), …

智慧旅游平台开发微信小程序【附源码、文档说明】

博主介绍&#xff1a;✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3…