Ajax表单验证用户名是否存在

程驰05

程驰05

2016-02-19 20:36

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐Ajax表单验证用户名是否存在,无聊中的都看过来。

做一个表单验证里面最简单的例子,检查用户名是否存在,使用Ajax完成表单验证的正常步骤应该是:

客户端收集表单信息。

使用XMLHttpRequest对象提交到服务器。

服务器完成验证的逻辑,返回结果信息。

浏览器端根据服务器返回的信息对用户做出一定的提示。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

不过由于我的空间不支持任何服务器段语言,所以把本应在服务器的逻辑搬到了浏览器,由JavaScript来做,服务器只负责提供一个用户名的列表。最后的效果如下,试着输入test,cainiao8这些用户名,都会显示已注册。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

JavaScript代码分析
首先,当文档载入完毕的时候,给表格设置change事件的响应函数ajaxValidate,代码如下:

addEventSimple(window,'load',function(){ var test = document.getElementById('username'); addEventSimple(test,'change',ajaxValidate);});这样,当用户名文本框内的值改变之后,就会调用ajaxValidate函数,其代码如下:

function ajaxValidate(){ var options = {  url:'ajax/ajaxUsernames.xml',  listener:callback,  method:'GET' } var request = createRequest(options); request.send(null);}它会使用之前介绍的createRequest函数初始化一个XMLHttpRequest对象,并且将它发送到服务器,请求ajaxUsernames.xml文件。

最后就是callback函数了:

function callback(){ var xmlDoc = this.responseXML; var root = xmlDoc.getElementsByTagName('root')[0]; var nodes = root.getElementsByTagName("username"); var currentNode = null; var username = document.getElementById('username').value; for(var i = 0; i nodes.length; i++) {  currentNode = nodes[i];  if(username == currentNode.childNodes[0].nodeValue){   document.getElementById('test').innerHTML = '对不起!'+username+'已经被注册。';   return;  } } document.getElementById('test').innerHTML = '用户名' + username +'可以使用!';}callback函数在已经存在的用户名搜索当前用户输入的名字,判断是否已经存在。

展开更多 50%)
分享

猜你喜欢

Ajax表单验证用户名是否存在

Web开发
Ajax表单验证用户名是否存在

Ajax 用户名验证是否存在

Web开发
Ajax 用户名验证是否存在

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

ajax实现无刷新验证用户名是否存在

Web开发
ajax实现无刷新验证用户名是否存在

Ajax——异步检查用户名是否存在示例

Web开发
Ajax——异步检查用户名是否存在示例

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Ajax简单应用,检测用户名是否存在

Web开发
Ajax简单应用,检测用户名是否存在

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

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

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

win7怎么整理磁盘碎片

win7怎么整理磁盘碎片

Access的精髓不在VBA之中

Access的精髓不在VBA之中
下拉加载更多内容 ↓