博主信息
博文 48
粉丝 3
评论 1
访问量 46247
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
利用ajax实现表单的异步互动——2018年4月10日
JackBlog
原创
855人浏览过


GIF.gif


实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style type='text/css'>
		fieldset{
		width: 380px
	}
	</style>
</head>
<body>
	<div class="login">
		<fieldset>
			<legend>会员注册</legend>
			<p>
				账号:<input type="text" name='username' id='username' placeholder="请输入注册账号">
			</p>
			<p>
				密码:<input type="password" name='password' id='password' placeholder="请输入密码">
			</p>
		</fieldset>
	</div>
</body>
</html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js" charset="utf-8"></script>
<script type="text/javascript">
	$('#username').blur(username_check)
$('#password').blur(password_check)
		function username_check(){
		var username = $('#username').val()

		$('p:first span').remove()
		$.ajax({
			url:'/check.php?m=user',
			data:'username='+username,
			type:'GET',
			success:function(msg){
				$('p:first').append(msg)
			}
		})
	}
	function password_check(){
		var password = $('#password').val()
		$('p:eq(1) span').remove()
		$.ajax({
			url:'/check.php?m=pass',
			type:'GET',
			data:'password=' + password,
			success:function(msg){
				$('p:eq(1)').append(msg)
			}
		})
	}


</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

check.php代码

实例

<?php
		$namearray = ['zs0201','admin','admin888','diaozi'];
		$username = trim($_GET['username']);
		$password = trim($_GET['password']);
		if($_GET['m']=='user'){
			if(strlen($username)==0){
				echo '<span style="color:red">用户名不得为空</span>';
			}else if(is_numeric($username)){
				echo '<span style="color:red">账号不能为纯数字</span>';
			}else if(in_array($username,$namearray)){
					echo '<span style="color:red">用户名已注册</span>';
			}else{
					echo '<span style="color:green">用户名可用</span>';
			}
		}

		if($_GET['m']=='pass'){
			if (empty($password)) {
				echo '<span style="color:red">密码不得为空</span>';
		}else if(is_numeric($password)){
				echo '<span style="color:red">密码不能为纯数字</span>';
		}
}
?>

运行实例 »

点击 "运行实例" 按钮查看在线实例


批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学