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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 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文件的实现方法
2007/03/19 PHP
Smarty安装配置方法
2008/04/10 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
python如何建立全零数组
2020/07/19 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
公务员个人自我评价分享
2013/11/06 职场文书
实用的简历自我评价
2014/03/06 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
公务员培的训心得体会
2014/09/01 职场文书
保送生自荐信
2015/03/06 职场文书
端午节寄语2015
2015/03/23 职场文书
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers