zoukankan      html  css  js  c++  java
  • Thinkphp+AJAX动态验证用户输入是否合法

        遇到用户注冊等情况时。假设等用户输入全部信息,点击注冊button提交后。再验证输入是否正确,体验非常不好,并且非常浪费用户的时间,添加注冊成本,这里提供一个样例,演示了怎么使用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

    <form method="post" action="{:U('Index/register')}">
    		<div class="form-element">
    			<label class="left">用户名:</label>
    			<div>
    				<input type="text" name="username" id="username" value="" />
    				<div id="tooltip1" class="tooltip-info prompt">
    					<span class="tooltip-icon-border"></span> 
    					<span class="tooltip-icon-bg"></span> 
    					<span class="state"></span> 
    					<span id="mess1" class="mess"></span>
    				</div>
    			</div>
    		</div>
    		<div class="form-section">
    			<div class="form-element">
    				<label>密码:</label>
    				<div>
    					<input type="password" name="password" id="password" value="" />
    					<div id="tooltip2" class="tooltip-info prompt">
    						<span class="tooltip-icon-border"></span> 
    						<span class="tooltip-icon-bg"></span> 
    						<span class="state"></span>
    					    <span id="mess2" class="mess"></span>
    					</div>
    				</div>
    			</div>
    			<div class="form-element">
    				<label>确认密码:</label>
    				<div>
    					<input type="password" name="repassword" id="repassword" value="" />
    					<div id="tooltip22" class="tooltip-info prompt">
    						<span class="tooltip-icon-border"></span> 
    						<span class="tooltip-icon-bg"></span> 
    						<span class="state"></span> 
    						<span id="mess22" class="mess"></span>
    					</div>
    				</div>
    			</div>
    			<div class="form-element">
    				<label>邮箱:</label>
    				<div>
    					<input type="text" name="email" id="email" value="" />
    					<div id="tooltip3" class="tooltip-info prompt">
    						<span class="tooltip-icon-border"></span> 
    						<span class="tooltip-icon-bg"></span> 
    						<span class="state"></span> 
    						<span id="mess3" class="mess"></span>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div>
    			<div>
    				<button type="submit" name="c12" id="submit1"
    					class="button-action large">注冊</button>
    			</div>
    		</div>
    	</form>


    四、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


    用户输入username后。当输入框失去焦点时会触发blur事件。能够在这时候验证username输入是否正确

    jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求

     參数:

    url (String) : 发送请求的URL地址.

    data (Map) : (可选) 要发送给server的数据。以 Keyalue 的键值对形式表示。



    callback (Function) : (可选) 加载成功时回调函数(仅仅有当Response的返回状态是success才是调用该方法)。

    type (String) : (可选)官方的说明是:Type of data to be sent。事实上应该为client请求的类型(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);
    					}
    				})
    			});

    password,反复password,邮箱验证类似

    验证邮箱的时候须要注意,假设用户输入邮箱后,立马点击注冊button,这时候会同一时候运行注冊button的click事件,邮箱输入框的blur事件。因为邮箱验证是$.post是异步的,post还没有运行完,click事件里error['email']=1。不会运行$('#submit1').submit();所以这时候再设置一个标志error['submit'] = 0;0表示点击过注冊button,默觉得1,在邮箱blur回调函数中推断error['submit'] 是否等于0,即推断是否点击过,假设点击过。提交表单,假设没点击过,仅仅须要验证邮箱。

    用户输入邮箱后。鼠标在屏幕上其它地方点击。仅仅运行blur,跟username。password情况一样。

    六、server处理


    public function checkName() {
    		$user = D ( 'user' );
    		if (! $user->create ()) {
    			exit ( $user->getError () );
    		} else {
    			echo 0;//这是回传给$.post的数据,相应上面的data
    		}
    	}

    以上是单步验证username的方法。以下来看怎么把全部数据提交给server


    七、 把全部数据提交给server


    通过上面的html代码注意到这里用了一个form,以post方式提交表单。action指向server能处理的地址
    点击注冊button时,先推断全部输入是否正确。假设正确,才运行提交表单

    $('#submit1').click(function() {
    		if ($('#username').val() == '') {
    			$('#tooltip1').attr('class', 'tooltip-info visible-inline error');
    			$('#mess1').html("username不能为空!");
    		}
    		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(); // 假设username验证失败。屏幕会滚动到username的位置。让用户又一次输入
    			$("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;
    		}
    	});

    server端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', // server地址 'DB_NAME' => 'thinkphp', // 数据库名 'DB_USER' => 'root', // username 'DB_PWD' => '123', // password 'DB_PORT' => '3306', // port 'DB_PREFIX' => 'tp_', // 数据库表前缀 );

    源代码:http://download.csdn.net/detail/welovesunflower/8274521


  • 相关阅读:
    70.BOM
    69.捕获错误try catch
    68.键盘事件
    523. Continuous Subarray Sum
    901. Online Stock Span
    547. Friend Circles
    162. Find Peak Element
    1008. Construct Binary Search Tree from Preorder Traversal
    889. Construct Binary Tree from Preorder and Postorder Traversal
    106. Construct Binary Tree from Inorder and Postorder Traversal
  • 原文地址:https://www.cnblogs.com/yutingliuyl/p/6732310.html
Copyright © 2011-2022 走看看