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对数字的判断与处理实例分析
Feb 02 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 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
PHP脚本数据库功能详解(中)
2006/10/09 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
用Python写一段用户登录的程序代码
2018/04/22 Python
Python正则表达式指南 推荐
2018/10/09 Python
python得到单词模式的示例
2018/10/15 Python
通过代码实例了解Python sys模块
2020/09/14 Python
python实现经纬度采样的示例代码
2020/12/10 Python
selenium如何定位span元素的实现
2021/01/13 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
网站客服岗位职责
2014/04/05 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
市场部岗位职责
2015/02/12 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
六年级作文之自救
2019/12/19 职场文书
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL