ajax+php 验证用户注册状态
现在比较流行用 ajax 来验证用户注册程序，关键的好处就是体验度超棒，不用刷新页面即可以判断用户填写的情况是否符合程序标准，其实用 javascrip 来判断验证体验也是不错的，但相对于 ajax 就有点逊色了，ajax不仅在前台体验上面显示很完美，而且还可以和后台程序完美的结合，比如验证用户名是否已被注册就是很好的例子了。
这个是由开源程序ecshop里面程序中扣出的用户注册里面的ajax验证，有兴趣的朋友可以下载看看。
邮件验证和用户验证，这个需要查询数据库，只要在user.php里面增加查询就可以了，里面包含焦点验证和提交后验证，这个小程序基本上实现了前台ajax提交验证以及和后台数据库的完美结合，在此基础上可以修改得更完善一些，让自己的网页也炫起来吧～
效果页面：
共有三个页面，分别来看一下：
register.php 注册的前台页面，同时包含 user.js 的 ajax 验证页面。
XML/HTML代码
<script language="javascript">
document.write("<script src='user.js'><\/script>");
</script>
<form action="user.php" method="post" name="formUser" onsubmit="return register();">
用户名：<input type="text" name="username"id="username" value="" onblur="is_registered(this.value)"/><span style="color:#FF0000" id="username_notice"> *</span><br>
密码：<input type="password" name="password" id="password"value="" onblur="check_password(this.value)"/><span style="color:#FF0000" id="password_notice"> *</span><br>
确认密码：<input type="password" name="conform_password" id="confirm_password" value=""onblur="check_conform_password(this.value)"/><span style="color:#FF0000" id="conform_password_notice"> *</span><br>
邮箱：<input type="text" name="email" value="" onblur="checkEmail(this.value)"/> <span id="email_notice" style="color:#FF0000"> *</span><br>
电话：<input type="text" name="tel" value=""><br>
<input type="submit" name="Submit" value="确定">
</form>
register.php 页面，这里只给出了一个小实例来验证接受过来的用户名，可以自行更改一下与数据库的链接。
<?php
$action = isset($_REQUEST['act']) ? trim($_REQUEST['act']) : 'default';
if ($action == 'is_registered')
{
$username = trim($_GET['username']);
if ($_GET['username']=='60ie.net')
{
echo 'flase';
}
else
{
echo 'true';
}
}
if($action == 'check_email')
{
$email = trim($_GET['email']);
echo 'true';
}
?>
user.js页面：ajax 技术的核心文件了，实时进行验证用户名，密码，邮箱，电话等状态
Javascript代码
/**
* @file transport.js
* @description 用于支持AJAX的传输类。
* @author ECShop R&D Team ( http://www.ecshop.com/ )
* @date 2007-03-08 Wednesday
* @license Licensed under the Academic Free License 2.1 http://www.opensource.org/licenses/afl-2.1.php
* @version 1.0.20070308
**/
var Transport =
{
/* *
* 存储本对象所在的文件名。
*
* @static
*/
filename : "transport.js",
/* *
* 存储是否进入调试模式的开关，打印调试消息的方式，换行符，调试用的容器的ID。
*
* @private
*/
debugging :
{
isDebugging : 0,
debuggingMode : 0,
linefeed : "",
containerId : 0
},
/* *
* 设置调试模式以及打印调试消息方式的方法。
*
* @public
* @param {int} 是否打开调试模式 0：关闭，1：打开
* @param {int} 打印调试消息的方式 0：alert，1：innerHTML
*
*/
debug : function (isDebugging, debuggingMode)
{
this.debugging =
{
"isDebugging" : isDebugging,
"debuggingMode" : debuggingMode,
"linefeed" : debuggingMode ? "<br />" : "\n",
"containerId" : "dubugging-container" + new Date().getTime()
};
},
/* *
* 传输完毕后自动调用的方法，优先级比用户从run()方法中传入的回调函数高。
*
* @public
*/
onComplete : function ()
{
},
/* *
* 传输过程中自动调用的方法。
*
* @public
*/
onRunning : function ()
{
},
/* *
* 调用此方法发送HTTP请求。
*
* @public
* @param {string} url 请求的URL地址
* @param {mix} params 发送参数
* @param {Function} callback 回调函数
* @param {string} ransferMode 请求的方式，有"GET"和"POST"两种
* @param {string} responseType 响应类型，有"JSON"、"XML"和"TEXT"三种
* @param {boolean} asyn 是否异步请求的方式
* @param {boolean} quiet 是否安静模式请求
*/
run : function (url, params, callback, transferMode, responseType, asyn, quiet)
{
/* 处理用户在调用该方法时输入的参数 */
params = this.parseParams(params);
transferMode = typeof(transferMode) === "string"
&& transferMode.toUpperCase() === "GET"
? "GET"
: "POST";
if (transferMode === "GET")
{
var d = new Date();
url += params ? (url.indexOf("?") === - 1 ? "?" : "&") + params : "";
url = encodeURI(url) + (url.indexOf("?") === - 1 ? "?" : "&") + d.getTime() + d.getMilliseconds();
params = null;
}
responseType = typeof(responseType) === "string" && ((responseType = responseType.toUpperCase()) === "JSON" || responseType === "XML") ? responseType : "TEXT";
asyn = asyn === false ? false : true;
/* 处理HTTP请求和响应 */
var xhr = this.createXMLHttpRequest();
try
{
var self = this;
if (typeof(self.onRunning) === "function" && !quiet)
{
self.onRunning();
}
xhr.open(transferMode, url, asyn);
if (transferMode === "POST")
{
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
if (asyn)
{
xhr.onreadystatechange = function ()
{
if (xhr.readyState == 4)
{
switch ( xhr.status )
{
case 0:
case 200: // OK!
/*
* If the request was to create a new resource
* (such as post an item to the database)
* You could instead return a status code of '201 Created'
*/
if (typeof(self.onComplete) === "function")
{
self.onComplete();
}
if (typeof(callback) === "function")
{
callback.call(self, self.parseResult(responseType, xhr), xhr.responseText);
}
break;
case 304: // Not Modified
/*
* This would be used when your Ajax widget is
* checking for updated content,
* such as the Twitter interface.
*/
break;
case 400: // Bad Request
/*
* A bit like a safety net for requests by your JS interface
* that aren't supported on the server.
* "Your browser made a request that the server cannot understand"
*/
alert("XmlHttpRequest status: [400] Bad Request");
break;
case 404: // Not Found
alert("XmlHttpRequest status: [404] \nThe requested URL "+url+" was not found on this server.");
break;
case 409: // Conflict
/*
* Perhaps your Javascript request attempted to
* update a Database record
* but failed due to a conflict
* (eg: a field that must be unique)
*/
break;
case 503: // Service Unavailable
/*
* A resource that this request relies upon
* is currently unavailable
* (eg: a file is locked by another process)
*/
alert("XmlHttpRequest status: [503] Service Unavailable");
break;
default:
alert("XmlHttpRequest status: [" + xhr.status + "] Unknow status.");
}
xhr = null;
}
}
if (xhr != null) xhr.send(params);
}
else
{
if (typeof(self.onRunning) === "function")
{
self.onRunning();
}
xhr.send(params);
var result = self.parseResult(responseType, xhr);
//xhr = null;
if (typeof(self.onComplete) === "function")
{
self.onComplete();
}
if (typeof(callback) === "function")
{
callback.call(self, result, xhr.responseText);
}
return result;
}
}
catch (ex)
{
if (typeof(self.onComplete) === "function")
{
self.onComplete();
}
alert(this.filename + "/run() error:" + ex.description);
}
},
/* *
* 如果开启了调试模式，该方法会打印出相应的信息。
*
* @private
* @param {string} info 调试信息
* @param {string} type 信息类型
*/
displayDebuggingInfo : function (info, type)
{
if ( ! this.debugging.debuggingMode)
{
alert(info);
}
else
{
var id = this.debugging.containerId;
if ( ! document.getElementById(id))
{
div = document.createElement("DIV");
div.id = id;
div.style.position = "absolute";
div.style.width = "98%";
div.style.border = "1px solid #f00";
div.style.backgroundColor = "#eef";
var pageYOffset = document.body.scrollTop
|| window.pageYOffset
|| 0;
div.style.top = document.body.clientHeight * 0.6
+ pageYOffset
+ "px";
document.body.appendChild(div);
div.innerHTML = "<div></div>"
+ "<hr style='height:1px;border:1px dashed red;'>"
+ "<div></div>";
}
var subDivs = div.getElementsByTagName("DIV");
if (type === "param")
{
subDivs[0].innerHTML = info;
}
else
{
subDivs[1].innerHTML = info;
}
}
},
/* *
* 创建XMLHttpRequest对象的方法。
*
* @private
* @return 返回一个XMLHttpRequest对象
* @type Object
*/
createXMLHttpRequest : function ()
{
var xhr = null;
if (window.ActiveXObject)
{
var versions = ['Microsoft.XMLHTTP', 'MSXML6.XMLHTTP', 'MSXML5.XMLHTTP', 'MSXML4.XMLHTTP', 'MSXML3.XMLHTTP', 'MSXML2.XMLHTTP', 'MSXML.XMLHTTP'];
for (var i = 0; i < versions.length; i ++ )
{
try
{
xhr = new ActiveXObject(versions[i]);
break;
}
catch (ex)
{
continue;
}
}
}
else
{
xhr = new XMLHttpRequest();
}
return xhr;
},
/* *
* 当传输过程发生错误时将调用此方法。
*
* @private
* @param {Object} xhr XMLHttpRequest对象
* @param {String} url HTTP请求的地址
*/
onXMLHttpRequestError : function (xhr, url)
{
throw "URL: " + url + "\n"
+ "readyState: " + xhr.readyState + "\n"
+ "state: " + xhr.status + "\n"
+ "headers: " + xhr.getAllResponseHeaders();
},
/* *
* 对将要发送的参数进行格式化。
*
* @private
* @params {mix} params 将要发送的参数
* @return 返回合法的参数
* @type string
*/
parseParams : function (params)
{
var legalParams = "";
params = params ? params : "";
if (typeof(params) === "string")
{
legalParams = params;
}
else if (typeof(params) === "object")
{
try
{
legalParams = "JSON=" + params.toJSONString();
}
catch (ex)
{
alert("Can't stringify JSON!");
return false;
}
}
else
{
alert("Invalid parameters!");
return false;
}
if (this.debugging.isDebugging)
{
var lf = this.debugging.linefeed,
info = "[Original Parameters]" + lf + params + lf + lf
+ "[Parsed Parameters]" + lf + legalParams;
this.displayDebuggingInfo(info, "param");
}
return legalParams;
},
/* *
* 对返回的HTTP响应结果进行过滤。
*
* @public
* @params {mix} result HTTP响应结果
* @return 返回过滤后的结果
* @type string
*/
preFilter : function (result)
{
return result.replace(/\xEF\xBB\xBF/g, "");
},
/* *
* 对返回的结果进行格式化。
*
* @private
* @return 返回特定格式的数据结果
* @type mix
*/
parseResult : function (responseType, xhr)
{
var result = null;
switch (responseType)
{
case "JSON" :
result = this.preFilter(xhr.responseText);
try
{
result = result.parseJSON();
}
catch (ex)
{
throw this.filename + "/parseResult() error: can't parse to JSON.\n\n" + xhr.responseText;
}
break;
case "XML" :
result = xhr.responseXML;
break;
case "TEXT" :
result = this.preFilter(xhr.responseText);
break;
default :
throw this.filename + "/parseResult() error: unknown response type:" + responseType;
}
if (this.debugging.isDebugging)
{
var lf = this.debugging.linefeed,
info = "[Response Result of " + responseType + " Format]" + lf
+ result;
if (responseType === "JSON")
{
info = "[Response Result of TEXT Format]" + lf
+ xhr.responseText + lf + lf
+ info;
}
this.displayDebuggingInfo(info, "result");
}
return result;
}
};
/* 定义两个别名 */
var Ajax = Transport;
Ajax.call = Transport.run;
var xmlHttp;
function S_xmlhttprequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
} else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
/* $Id : utils.js 5052 2007-02-03 10:30:13Z weberliu $ */
var Browser = new Object();
Browser.isMozilla = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument != 'undefined');
Browser.isIE = window.ActiveXObject ? true : false;
Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox") != - 1);
Browser.isSafari = (navigator.userAgent.toLowerCase().indexOf("safari") != - 1);
Browser.isOpera = (navigator.userAgent.toLowerCase().indexOf("opera") != - 1);
var Utils = new Object();
Utils.isEmail = function( email )
{
var reg1 = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)/;
return reg1.test( email );
}
/* 用户名的判断*/
function is_registered( username )
{
var submit_disabled = false;
var unlen = username.replace(/[^\x00-\xff]/g, "**").length;
if ( username == '' )
{
document.getElementById('username_notice').innerHTML = '用户名不能为空。';
var submit_disabled = true;
}
if ( !chkstr( username ) )
{
document.getElementById('username_notice').innerHTML = '用户名只能是由字母数字以及下划线组成。';
var submit_disabled = true;
}
if ( unlen < 3 )
{
document.getElementById('username_notice').innerHTML = ' 用户名长度不能少于 3 个字符。';
var submit_disabled = true;
}
if ( unlen > 14 )
{
document.getElementById('username_notice').innerHTML = '用户名最长不得超过7个汉字';
var submit_disabled = true;
}
if ( submit_disabled )
{
document.forms['formUser'].elements['Submit'].disabled = 'disabled';
return false;
}
Ajax.call( 'user.php?act=is_registered', 'username=' + username, registed_callback , 'GET', 'TEXT', true, true );
}
function registed_callback(result)
{
if ( result == "true" )
{
document.getElementById('username_notice').innerHTML = '可以注册';
document.forms['formUser'].elements['Submit'].disabled = '';
}
else
{
document.getElementById('username_notice').innerHTML = '用户名重复';
document.forms['formUser'].elements['Submit'].disabled = 'disabled';
}
}
function chkstr(str)
{
for (var i = 0; i < str.length; i++)
{
if (str.charCodeAt(i) < 127 && !str.substr(i,1).match(/^\w+$/ig))
{
return false;
}
}
return true;
}
/* 邮件验证*/
function checkEmail(email)
{
var submit_disabled = false;
if (email == '')
{
document.getElementById('email_notice').innerHTML = '* 邮件地址不能为空';
submit_disabled = true;
}
else if (!Utils.isEmail(email))
{
document.getElementById('email_notice').innerHTML = '* 邮件地址不合法';
submit_disabled = true;
}
if( submit_disabled )
{
document.forms['formUser'].elements['Submit'].disabled = 'disabled';
return false;
}
Ajax.call( 'user.php?act=check_email', 'email=' + email, check_email_callback , 'GET', 'TEXT', true, true );
}
function check_email_callback(result)
{
if ( result == 'true' )
{
document.getElementById('email_notice').innerHTML = '可以注册';
document.forms['formUser'].elements['Submit'].disabled = '';
}
else
{
document.getElementById('email_notice').innerHTML = '邮箱已存在,请重新输入';
document.forms['formUser'].elements['Submit'].disabled = 'disabled';
}
}
/* 检测密码*/
function check_password( password )
{ var submit_disabled = false;
if ( password.length < 6 )
{
document.getElementById('password_notice').innerHTML = '- 登录密码不能少于 6 个字符。';
}
else
{
document.getElementById('password_notice').innerHTML = '* 可以注册';
document.forms['formUser'].elements['Submit'].disabled = '';
}
}
function check_conform_password( conform_password )
{
password = document.getElementById('password').value;
if ( conform_password.length < 6 )
{
document.getElementById('conform_password_notice').innerHTML = '- 登录密码不能少于 6 个字符。';
return false;
}
if ( conform_password != password )
{
document.getElementById('conform_password_notice').innerHTML = '- 两次输入密码不一致';
}
else
{
document.getElementById('conform_password_notice').innerHTML = '* 可以注册';
document.forms['formUser'].elements['Submit'].disabled = '';
}
}
function register()
{
var frm = document.forms['formUser'];
var username = frm.elements['username'].value;
var email = frm.elements['email'].value;
var password = frm.elements['password'].value;
var confirm_password = frm.elements['confirm_password'].value;
var msg = "";
// 检查输入
var msg = '';
if (username.length == 0)
{
msg += '用户名不能为空' + '\n';
}
else if (username.match(/^\s*$|^c:\\con\\con$|[%,\'\*\"\s\t\<\>\&\\]/))
{
msg += '用户名 %s 含有敏感字符' + '\n';
}
else if (username.length < 3)
{
//msg += username_shorter + '\n';
}
if (email.length == 0)
{
msg += 'email为空' + '\n';
}
else
{
if ( ! (Utils.isEmail(email)))
{
msg += '%s 不是合法的email地址' + '\n';
}
}
if (password.length == 0)
{
msg += '- 登录密码不能为空。' + '\n';
}
else if (password.length < 6)
{
msg += '- 登录密码不能少于 6 个字符。' + '\n';
}
if (confirm_password != password )
{
msg += '- 两次输入密码不一致' + '\n';
}
if (msg.length > 0)
{
alert(msg);
return false;
}
else
{
return true;
}
}
评论已关闭！