Thinkphp+AJAX动态验证用户输入是否合法_PHP教程
Thinkphp+AJAX动态验证用户输入是否合法
遇到用户注册等情况时,如果等用户输入所有信息,点击注册按钮提交后,再验证输入是否正确,体验很不好,而且很浪费用户的时间,增加注册成本,这里提供一个例子,演示了怎么使用ajax进行单步验证,使用thinkphp 3.2框架,环境WAMPServer 2.4,版本PHP 5.4.16+ Apache 2.4.4+ MySql 5.6.12
一、数据库设计:
数据库名 thinkphp
表名 tp_user 其中tp_是表前缀,可以在config.php中定义,操作表的时候只用user就行
CREATE TABLE IF NOT EXISTS `tp_user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(30) NOT NULL, `password` varchar(255) NOT NULL, `email` varchar(50) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
二、页面设计
三、HTML部分
view/Index/index.html
四、thinkphp自动验证
protected $_validate=array( array('username','require','用户名不能为空!'), array('username','','用户名已经存在',0,'unique',1), array('username','/^[a-zA-Z][a-zA-Z0-9_]{1,19}$/','用户名不合法!'), array('email','require','邮箱不能为空!'), array('email','email','邮箱格式不正确!'), array('email','','该邮箱已经注册过!',0,'unique',1), ); protected $_auto = array( array('password', 'md5', 1, 'function'), // 对password字段在新增的时候使md5函数处理 );
五、 使用ajax
用户输入用户名后,当输入框失去焦点时会触发blur事件,可以在这时候验证用户名输入是否正确
jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求
参数:
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据,以 Key

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)
$('#username').blur( function() { var username = $(this).val(); $.post(index.php/Home/Index/checkName, { 'username' : username//前一个username需要跟UserModel对应,即跟数据库字段对应 }, function(data) { if (data == 0) { error['username'] = 0; $('#tooltip1').attr('class', 'tooltip-info visible-inline success'); } else { error['username'] = 1; $('#tooltip1').attr('class', 'tooltip-info visible-inline error'); $('#mess1').html(data); } }) return false; });
密码,重复密码,邮箱验证类似
验证邮箱的时候需要注意,如果用户输入邮箱后,立刻点击注册按钮,这时候会同时执行注册按钮的click事件,邮箱输入框的blur事件,由于邮箱验证是$.post是异步的,post还没有执行完,click事件里error['email']=1,不会执行$('#submit1').submit();所以这时候再设置一个标志error['submit'] = 0;0表示点击过注册按钮,默认为1,在邮箱blur回调函数中判断error['submit'] 是否等于0,即判断是否点击过,如果点击过,提交表单,如果没点击过,只需要验证邮箱。
用户输入邮箱后,鼠标在屏幕上其他地方点击,只执行blur,跟用户名,密码情况一样。
六、服务器处理
public function checkName() { $user = D ( 'user' ); if (! $user->create ()) { exit ( $user->getError () ); } else { echo 0;//这是回传给$.post的数据,对应上面的data } }
以上是单步验证用户名的方法,下面来看怎么把所有数据提交给服务器
七、 把所有数据提交给服务器
通过上面的html代码注意到这里用了一个form,以post方式提交表单,action指向服务器能处理的地址
点击注册按钮时,先判断所有输入是否正确,如果正确,才执行提交表单
$('#submit1').click(function() { if ($('#username').val() == '') { $('#tooltip1').attr('class', 'tooltip-info visible-inline error'); $('#mess1').html(用户名不能为空!); } if ($('#password').val() == '') { $('#tooltip2').attr('class', 'tooltip-info visible-inline error'); $('#mess2').html(密码不能为空!); } if ($('#repassword').val() == '') { $('#tooltip22').attr('class', 'tooltip-info visible-inline error'); $('#mess22').html(确认密码不能为空!); } if ($('#email').val() == '') { $('#tooltip3').attr('class', 'tooltip-info visible-inline error'); $('#mess3').html(邮箱不能为空!); } if (error['username'] == 1) { var scroll_offset = $(#tooltip1).offset(); // 如果用户名验证失败,屏幕会滚动到用户名的位置,让用户重新输入 $(body,html).animate({ scrollTop : scroll_offset.top // 让body的scrollTop等于pos的top,就实现了滚动 }, 0); return false; } else if (error['password'] == 1) { return false; } else if (error['email'] == 1) { error['submit'] = 0; return true; } else { $('#submit1').submit(); return true; } });
服务器端register方法接收所有数据,如果成功跳转到Home/index页面,如果失败,跳转到错误提示页面
public function register() { $user = D ( 'user' ); if (! $user->create ()) { dump ( $user->getError () ); } $uid = $user->add (); if ($uid) { $_SESSION ['username'] = $_POST ['username']; $this->redirect ( 'Home/index' ); } else { $this->error ( 注册失败! ); } }
八、config.php配置
<!--?php return array( /* 数据库配置 */ 'DB_TYPE' =--> 'mysql', // 数据库类型 'DB_HOST' => '127.0.0.1', // 服务器地址 'DB_NAME' => 'thinkphp', // 数据库名 'DB_USER' => 'root', // 用户名 'DB_PWD' => '123', // 密码 'DB_PORT' => '3306', // 端口 'DB_PREFIX' => 'tp_', // 数据库表前缀 );

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

随着社交媒体的迅速发展,小红书已经成为了备受青睐的社交平台之一。用户可以通过创建小红书号来展示个人身份,并与其他用户交流互动。如果你需要查找某个用户的小红书号码,可以按照以下简单步骤进行操作。一、如何用小红书号查找用户?1.打开小红书APP,点击右下角的“发现”按钮,然后选择“笔记”选项。2.在笔记列表中,找到你想查找的用户发布的那篇笔记。点击进入笔记详情页。3.在笔记详情页中,点击用户头像下方的“关注”按钮,即可进入该用户的个人主页。4.在用户个人主页右上角,点击三个点按钮,然后选择“个人信息

“本地用户和组”实用程序内置于“计算机管理”中,可以从控制台访问,也可以独立访问。但是,一些用户发现Windows11中缺少本地用户和组。对于可以访问它的一些人来说,该消息显示,此管理单元可能不适用于此版本的Windows10。若要管理此计算机的用户帐户,请使用“控制面板”中的“用户帐户”工具。该问题已在上一次迭代Windows10中报告,并且通常是由于用户端的问题或疏忽引起的。为什么Windows11中缺少本地用户和组?您运行的是Windows家庭版,本地用户和组在专业版及更高版本上可用。活动

在Ubuntu系统中,root用户通常是禁用状态的。要激活root用户,可以使用passwd命令设置密码,然后使用su-命令以root身份登录。根用户是具有系统管理权限且不受限制的用户。他拥有访问和修改文件、用户管理、软件安装和删除,以及系统配置更改等权限。根用户与普通用户有着明显的区别,根用户拥有系统中最高的权限和更广泛的控制权。根用户可以执行重要的系统命令和编辑系统文件,而普通用户则无法做到这一点。在本指南中,我将探讨Ubuntu根用户,如何以根用户身份登录,以及它与普通用户的不同之处。注意

在创建虚拟机时,系统会要求您选择磁盘类型,您可以选择固定磁盘或动态磁盘。如果您选择了固定磁盘,后来意识到需要动态磁盘,或者相反,该怎么办?好!你可以把一种转换成另一种。在这篇文章中,我们将看到如何将VirtualBox固定磁盘转换为动态磁盘,反之亦然。动态磁盘是一种虚拟硬盘,它最初具有较小的大小,随着您在虚拟机中存储数据,其大小会相应增长。动态磁盘在节省存储空间方面非常高效,因为它们只占用所需的主机存储空间。然而,随着磁盘容量的扩展,可能会稍微影响计算机的性能。固定磁盘和动态磁盘是虚拟机中常用的

如果要在Windows11中将动态磁盘转换为基本磁盘,则应首先创建备份,因为该过程将擦除其中的所有数据。为什么要在Windows11中将动态磁盘转换为基本磁盘?根据Microsoft,动态磁盘已从Windows中弃用,不再推荐使用。此外,Windows家庭版不支持动态磁盘,因此您将无法访问这些逻辑驱动器。如果要将更多磁盘合并到更大的卷中,建议使用基本磁盘或存储空间。在本文中,我们将向您展示如何在Windows11上将动态磁盘转换为基本磁盘如何在Windows11中将动态磁盘转换为基本磁盘?在开始

由于权限,并不总是可以访问某些文件夹,在今天的指南中,我们将向您展示如何在Windows11上的旧硬盘驱动器上访问用户文件夹。此过程很简单,但可能需要一段时间,有时甚至数小时,具体取决于驱动器的大小,因此请格外耐心并严格按照本指南中的说明进行操作。为什么我无法访问旧硬盘上的用户文件夹?用户文件夹的所有权属于另一台电脑,因此您无法对其进行修改。除了所有权之外,您对该文件夹没有任何权限。如何打开旧硬盘上的用户文件?1.取得文件夹的所有权并更改权限找到旧的用户目录,右键单击它,然后选择属性。导航到“安

sudo(超级用户执行)是Linux和Unix系统中的一个关键命令,允许普通用户以root权限运行特定命令。sudo的功能主要体现在以下几个方面:提供权限控制:sudo通过授权用户以临时方式获取超级用户权限,从而实现了对系统资源和敏感操作的严格控制。普通用户只能在需要时通过sudo获得临时的特权,而不需要一直以超级用户身份登录。提升安全性:通过使用sudo,可以避免在常规操作中使用root账户。使用root账户进行所有操作可能会导致意外的系统损坏,因为任何错误或不小心的操作都将具有完全的权限。而

Ubuntu系统添加了很多用户,想在不用的用户想要删除,该怎么删除呢?下面我们就来看看详细的教程。1、打开终端命令行,运用userdel命令删除指定的用户,注意要加sudo权限指令,如下图所示2、在删除的时候一定注意是在管理员目录下的,普通的用户是没有这个权限的,如下图所示3、删除指令执行完了以后怎么判断是否真正删除了呢?下面我们运用cat命令打开passwd文件,如下图所示4、我们看到passwd文件中已经没有了所删除的用户信息了,这证明用户已经被删除了,如下图所示5、然后我们进入home文件
