常德网站建设
常德网站设计制作建设,常德网页设计制作建设,常德软件开发虚拟主机域名注册 常德网站制作 常德网站设计 常德虚拟主机  
 
常德域名注册
   域名主机 DNS HOST
   关于赛特 ABOUT SITE
   服务项目 SERVICE PROJECT
   软件开发 DEVELOPMENT
   解决方案 SOLUTION
   服务流程 CUSTOMER PROCESS
   成功案例 SUCCESS TORIES
   商务合作 COOPERATION
   服务报价 SERVICE PRICE
   联系赛特 CONTACT SITE
   网站知识 WEBSITE KNOWLEDGE
 您的位置:首页常德网站制作 - php+ajax实现无刷新表单验证  
 



php+ajax实现无刷新表单验证
 
常德网站制作  加入时间:2011/9/16 18:13:08     点击:6634 常德网站建设  常德网站制作

很多时候,我们在网上注册个人信息,在提交完页面后,总得等待页面刷新来告诉我们注册是否成功,遇到网络差的时候,如果注册了一大串的东西,在经过漫长的 等待页面刷新后,得到的确是“您的用户名已被使用”或XXXXXXX不合法,我想大家的心情一定特别不爽,今天就介绍个AJAX实现页面不刷新注册+实时 检测用户信息的简单注册程序,希望对大家有所帮助。好的,先看注册界面代码

<table ;831" border="0" align="center" cellpadding="0" cellspacing="0">
<tr style="display:none">
<td height="35" align="center" id="result"> </td>
</tr>
</table>
<table ;100%" height="256" border="0" align="center" cellpadding="1" cellspacing="1">
<tr>
<td ;150" align="left" bgcolor="#FFFFFF"> · 用户名称: </td>
<td ;310" align="center" bgcolor="#FFFFFF">
<input name="username" type="text" class="inputtext" id="username" >

<font color="#FF6633">*</font></td>
<td align="left" bgcolor="#FFFFFF" id="check"> 4-16个字符,英文小写、汉字、数字、最好不要全部是数字。</td>
</tr>
<tr>
<td ;150" align="left" bgcolor="#FFFFFF"> · 用户密码:</td>
<td ;310" align="center" bgcolor="#FFFFFF">
<input name="userpwd" type="password" class="inputtext" id="userpwd" >

<font color="#FF6633">*</font> </td>
<td align="left" bgcolor="#FFFFFF" id="pwd"> 密码字母有大小写之分。6-16位(包括6、16),限用英文、数字。</td>
</tr>
<tr>
<td ;150" align="left" bgcolor="#FFFFFF"> · 重复密码:</td>
<td ;310" align="center" bgcolor="#FFFFFF">
<input name="reuserpwd" type="password" class="inputtext" id="reuserpwd"
>

<font color="#FF6633">*</font> </td>
<td align="left" bgcolor="#FFFFFF" id="repwd"> 请再次输入登录密码。</td>
</tr>
</table>

如图:


红色部分就是一会要调用的js函数了,当我们选定一个文本框后就会开始调用,现在我们看上面那个页面包含的ajaxreg.js文件的代码,里面就是包含了ajax框架和一些判断函数。
var http_request=false;
function send_request(url){//初始化,指定处理函数,发送请求的函数
http_request=false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest){//Mozilla浏览器
http_request=new XMLHttpRequest();
if(http_request.overrideMimeType){//设置MIME类别
http_request.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject){//IE浏览器
try{
http_request=new ActiveXObject("Msxml2.XMLHttp");
}catch(e){
try{
http_request=new ActiveXobject("Microsoft.XMLHttp");
}catch(e){}
}
}
if(!http_request){//异常,创建对象实例失败
window.alert("创建XMLHttp对象失败!");
return false;
}
http_request.onreadystatechange=processrequest;
//确定发送请求方式,URL,及是否同步执行下段代码
http_request.open("GET",url,true);
http_request.send(null);
}
//处理返回信息的函数
function processrequest(){
if(http_request.readyState==4){//判断对象状态
if(http_request.status==200){//信息已成功返回,开始处理信息
document.getElementById(reobj).innerHTML=http_request.responseText;
}
else{//页面不正常
alert("您所请求的页面不正常!");
}
}
}
function usercheck(obj){
var f=document.reg;
var username=f.username.value;
if(username==""){
document.getElementById(obj).innerHTML=" <font color=red>用户名不能为空!</font>";
f.username.focus();
return false;
}
else{
document.getElementById(obj).innerHTML="正在读取数据...";
send_request('checkuserreg.php?username='+username);
reobj=obj;
}
}
function pwdcheck(obj){
var f=document.reg;
var pwd=f.userpwd.value;
if(pwd==""){
document.getElementById(obj).innerHTML=" <font color=red>用户密码不能为空!</font>";
f.userpwd.focus();
return false;
}
else if(f.userpwd.value.length<6){
document.getElementById(obj).innerHTML=" &lt;font color=red>密码长度不能小于6位!</font>";
f.userpwd.focus();
return false;
}
else{
document.getElementById(obj).innerHTML=" <font color=red>密码符合要求!</font>";
}
}
function pwdrecheck(obj){
var f=document.reg;
var repwd=f.reuserpwd.value;
if (repwd==""){
document.getElementById(obj).innerHTML=" <font color=red>请再输入一次密码!</font>";
f.reuserpwd.focus();
return false;
}
else if(f.userpwd.value!=f.reuserpwd.value){
document.getElementById(obj).innerHTML=" <font color=red>两次输入的密码不一致!</font>";
f.reuserpwd.focus();
return false;
}
else{
document.getElementById(obj).innerHTML=" <font color=red>密码输入正确!</font>";
}
}

不难看出,数据是通过异步传输到checkuserreg.php接着回送回信息显示出来来达到实时检测用户名的目的,至于密码,只作了长度的实时判断,有兴趣的朋友可以扩充功能。来看下checkuserreg.php到底都做了什么:
<?php
header('Content-Type:text/html;charset=GB2312');//避免输出乱码
include('inc/config.inc.php');//包含数据库基本配置信息
include('inc/dbclass.php');//包含数据库操作类
$username=trim($_GET['username']);//获取注册名
//-----------------------------------------------------------------------------------
$db=new db;//从数据库操作类生成实例
$db->mysql($dbhost,$dbuser,$dbpassword,$dbname);//调用连接参数函数
$db-&gt;createcon();//调用创建连接函数
//-----------------------------------------------------------------------------------
$querysql="select username from cr_userinfo where username='$username'";//查询会员名
$result=$db-&gt;query($querysql);
$rows=$db-&gt;loop_query($result);
//若会员名已注册
//-----------------------------------------------------------------------------------
if($rows){
echo" <font color=red>此会员名已被注册,请更换会员名!</font>";
}
//会员名未注册则显示
//-----------------------------------------------------------------------------------
else{
echo" <font color=red>此会员名可以注册!</font>";
}
if($action==reg){
$addsql="insert into cr_userinfo
values(0,'$username','$userpwd','$time',50,1,'$userquestion','$useranswer')";

$db-&gt;query($addsql);
echo"<img src=images/pass.gif> <font color=red>恭喜您,注册成功!请点击<a href=login.php>这里</a>登陆!</font>";
}
$db-&gt;close();//关闭数据库连接
?&gt;

注释写的还算详细,大家应该都能看懂,再看信息合法后我们提交注册信息实现无刷新注册的PHP代码,senduserinfo.php:
<?php
header('Content-Type:text/html;charset=GB2312');//避免输出乱码
include('inc/config.inc.php');//包含数据库基本配置信息
include('inc/dbclass.php');//包含数据库操作类
$username=trim($_GET['username']);//获取注册名
$userpwd=md5(trim($_GET['userpwd']));//获取注册密码
$time=date("Y-m-d");

//-----------------------------------------------------------------------------------
$db=new db;//从数据库操作类生成实例
$db->mysql($dbhost,$dbuser,$dbpassword,$dbname);//调用连接参数函数
$db-&gt;createcon();//调用创建连接函数
//-----------------------------------------------------------------------------------
//开始插入数据
//-----------------------------------------------------------------------------------
$addsql="insert into cr_userinfo values(0,'$username','$userpwd','$time',50,1,'$userquestion','$useranswer')";
$db-&gt;query($addsql);
echo"<img src=images/pass.gif> <font color=red>恭喜您,注册成功!请点击<a href=login.php>这里</a>登录!</font>";

$db-&gt;close();//关闭数据库连接
?&gt;

OK!!大功告成,来看看效果图:
1.


2.


3.


4.


5.


上一条:网站建设asp缓存技术
下一条:简单实现用JS 音乐选播效果

  常德虚拟主机   客户列表 合作伙伴 | 工作机会 | 网站制作 | 友情链接
 本站关键词:赛特科技 常德网站建设 常德网站开发 常德网站制作 常德网站设计 常德虚拟主机 常德空间域名
  Copyright(c)2008 http://www.0736site.cn 地址:常德市洞庭大道西段170号湖南文理学院院内 赛特科技 湘ICP备08004647号