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 相关文章推荐
jquery之empty()与remove()区别说明
Sep 10 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
JavaScript实现筛选数组
Mar 02 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
一个用php3编写的简单计数器
2006/10/09 PHP
关于svn冲突的解决方法
2013/06/21 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
自主招生自荐信格式
2013/12/03 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
小学四年级学生评语
2014/12/26 职场文书
神农溪导游词
2015/02/11 职场文书
Java使用HttpClient实现文件下载
2022/08/14 Java/Android