jquery ajax 检测用户注册时用户名是否存在


Posted in Javascript onNovember 03, 2009

首先需要一个添加年级的页面,暂时叫grade.htm
这个文件需要引入两个文件jquery.js(jquery框架文件)和grade.js(验证的单独文件)。
下面的input用于输入用户名字,id="gradeInfo"是为了显示提示信息用的。
grade.htm

<input type="text" size="6" name="NAME" id="NAME"/><font color="red">*</font> 
<span id="gradeInfo"></span>

当用户输入信息以后,进入验证环节,看看我们的验证grade.js是怎么写的。
grade.js
/** 
* 验证用户名是否重复的js 
* 
* @name grade.js 
* @author jason<msn:x334@eyou.com> 
* @use 验证用户名是否存在 
* @todo 
*/ 
$(document).ready(function(){ 
checkConfirm(); 
}); 
//验证用户名是否存在 
function checkConfirm(){ 
$("#NAME").blur(function(){ 
var gradename = $(this).val(); 
var changeUrl = "GradeAdmin.php?action=check&gradename="+gradename; 
$.get(changeUrl,function(str){ 
if(str == '1'){ 
$("#gradeInfo").html("<font color=\"red\">您输入的用户名存在!请重新输入!</font>"); 
}else{ 
$("#gradeInfo").html(""); 
} 
}) 
return false; 
}) 
}

上面这段js文件,我只解释几个比较关键的地方。
1、$("#NAME").blur的含义是当grade.htm里的id为NAME的表单输入完以后触发动作。
2、$(this).val()的含义是取得id为NAME的表单里的值。
3、$.get(changeUrl,function(str)的含义是:运行ajax后,changeUrl是要连接的程序地址,str是程序
计算结束以后得到的显示结构。
4、$("#gradeInfo").html的含义是给id为gradeInfo的标签写入html文件。id为gradeInfo的标签就是指
的grade.htm里的id为gradeInfo的标签,显示的内容会出现再这个标签所在的位置。
再看看GradeAdmin.php的计算形式。
GradeAdmin.php
复制代码
if($frm_action == 'check') 
{ 
$gradeName = $_GET['gradename']; 
$gradeAdminObj = new Services_GradeAdmin($db); 
//根据$gradeName去判断是否再数据库里存在填入的用户名字,如果存在返回1,如果 
不存在返回0,这个返回值是传到grade.js里。 
$gradeCheck = $gradeAdminObj->getGradeByName($gradeName); 
if(is_numeric($gradeCheck)){ 
echo '1'; 
}else{ 
echo '0'; 
} 
exit(); 
}

这就是判断用户注册时用户名是否已存在问题
Javascript 相关文章推荐
一个javascript参数的小问题
Mar 02 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
jquery 正整数数字校验正则表达式
Jan 10 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
基于JQuery框架的AJAX实例代码
Nov 03 #Javascript
Jquery AJAX 框架的使用方法
Nov 03 #Javascript
JQuery打造PHP的AJAX表单提交实例
Nov 03 #Javascript
jQuery get和post 方法传值注意事项
Nov 03 #Javascript
js window.onload 加载多个函数的方法
Nov 02 #Javascript
深入认识javascript中的eval函数
Nov 02 #Javascript
javascript 按回车键相应按钮提交事件
Nov 02 #Javascript
You might like
一个简易需要注册的留言版程序
2006/10/09 PHP
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
Javascript注入技巧
2007/06/22 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
Python中的默认参数详解
2015/06/24 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
在校生自我鉴定
2014/01/23 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
环卫工人节活动总结
2014/08/29 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
教师工作表现评语
2014/12/31 职场文书
瘦西湖导游词
2015/02/03 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
Python与C++中梯度方向直方图的实现
2022/03/17 Python