教程集 > 脚本编程 > php > 正文 Thinkphp AJAX如何动态验证用户输入？

Thinkphp AJAX如何动态验证用户输入？

发布时间：2023-05-10 编辑：jiaochengji.com

教程集为您提供Thinkphp AJAX如何动态验证用户输入？等资源，欢迎您收藏本站，我们将为您提供最新的Thinkphp AJAX如何动态验证用户输入？资源

友好的验证用户输入，可以增强用户体验，而且可以减少用户的时间，增加用户提交数据的可能性。现在我们来讲讲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就行

$\'Thinkphp$

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 ;

二、页面设计

$\'Thinkphp$

三、HTML部分

四、thinkphp自动验证

相关资料参考：http://doc.thinkphp.cn/manual/auto_validate.html

在UserModel定义验证规则

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

alue 的键值对形式表示。

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);
     }
    })
   });

密码，重复密码，邮箱验证类似

验证邮箱的时候需要注意，如果用户输入邮箱后，立刻点击注册按钮，这时候会同时执行注册按钮的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 false;
  } 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_', // 数据库表前缀
);

您可能感兴趣的文章：
thinkphp ajax提交token的方法介绍
 php面向对象框架有哪些
 用PHP实现验证码功能
 thinkphp常用系统配置大全
 thinkphp中使用AOP切面编程快速验证数据的方法介绍
 php中$_SERVER[PATH_INFO]变量使用详解
 ThinkPHP 中文验证码的生成代码
 php正则查找html中包含id属性的html标签
 ThinkPHP中RBAC权限带菜单栏显示和详细权限操作
 使用jQuery.Validate进行客户端验证（初级篇）不使用微软验证控件的理由

上一篇：Yii框架实现数据分页及排序的例子下一篇：php中如何制定轻量级的MVC标准

[关闭]

Thinkphp AJAX如何动态验证用户输入？

最近更新

浏览排行