非常实用的ajax用户注册模块-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

非常实用的ajax用户注册模块

亚连

May 23, 2018 pm 04:00 PM

ajax modul Pendaftaran pengguna

这篇文章主要为大家详细介绍了非常实用的ajax用户注册模块，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

在网站设计中,ajax技术的使用已经很普遍了,尤其在交互式的网站中,ajax技术更不可缺少了,几乎在所有的交互式网站应用中，都会看到ajax的技术,大型网站诸如会员的注册,小型网站诸如无刷新的分页技术,给网站浏览者更好的用户体验，在局部网站设计中，如果浏览某一部分出错，而不用去重新刷新整个网页，应用最广的部分则是会员注册的无刷新验证等，无刷新的分页，无刷新的查看更多，无刷新的查询数据库中内容是否存在等等。

下面是ajax的用户注册模块，这个ajax注册模块很实用,大家只要根据自己的需要在扩展下就可以了，check.php这个文件是查询的数据的文件，把里面查询的内容改成自己的就可以了，应该很容易懂的，有需要的可以进行下载验证。

check.php

<?php
header("Content-Type:text/html;charset=gb2312");
@mysql_connect(&#39;localhost&#39;,&#39;root&#39;,&#39;ebaeba&#39;) or die("数据库服务器连接失败");
@mysql_select_db("test") or die("数据库不存在或不可用");



$uname = $_GET[&#39;userName&#39;];
//下面进行数据库查询　　查找是不是有这一个用户
//如果没有查找到这个用户名



$sql="select * from t1 where name=&#39;".$uname."&#39;";
$query=mysql_query($sql);
$row=mysql_fetch_object($query);

if(strlen($uname)<6||strlen($uname)>20)
{
 $msg="用户名必须是6至20个字符.";
}
else
{
 
 if($row==false)
 {
  $msg="该用户名有效，可以使用！";
 }
 else
 {
  $msg="对不起，此用户名已经存在，请更换用户名注册!";
 }
}
echo $msg ;
?>

reg.php

<%@page language="java" contentType="text/html;charset=gb2312"%>
<! DOCTYPE HTML PUBLIC　"-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html140/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>AJAX用户注册演示程序</title>
<script language="javascript" type="text/javascript">
<!--
//创建函数
function createXMLHTTP() 
{
 var request;
 var browser = navigator.appName;
 //使用IE，则使用XMLHttp对象
 if(browser == "Microsoft Internet Explorer") 
 {
 var arrVersions = ["Microsoft.XMLHttp", "MSXML2.XMLHttp.4.0",
  "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp","MSXML2.XMLHttp.5.0"];
 for (var i=0; i < arrVersions.length; i++) 
 {
  try 
  {
 //从中找到一个支持的版本并建立XMLHttp对象
  request = new ActiveXObject(arrVersions[i]); 
  return request;
  } 
  catch (exception)
  {
  //忽略，继续
  }
 }
 }
 else
 {
 //否则返回一个XMLHttpRequest对象
 request = new XMLHttpRequest(); 
 if(request.overrideMimeType)
 {
 　　 request.overrideMimeType(&#39;text/xml&#39;);
 　 }
 return request;
 } 
}
//全局XMLHTTP对象实例变量
var http = createXMLHTTP();
//发送请求
function chkUser()
{
 var url = "check.php"; //请求"CheckUserName" ServLet
 var name = document.getElementById("userName").value; 
 url += ("?userName="+escape(name)+"&oprate=chkUser");
 http.open("GET",url,true);
 http.onreadystatechange = ProcessHttpResponse;
 http.send(null);
 return ;
}
//处理响应
function ProcessHttpResponse()
{
 if(http.readyState == 4)
 {
 if(http.status == 200)
 {
 　 var xmlDocument = http.responseXML;
 　 if(http.responseText!="该用户名有效，可以使用！")
  {
 //返回的信息动态显示
 　　 document.getElementById("showStr").style.display = "";
 　　 document.getElementById("userName").style.background= "#FF0000";
 　　 document.getElementById("showStr").innerText = http.responseText;
 　 }
  else
  {
 　　 document.getElementById("userName").style.background= "#FFFFFF";
 　　 document.getElementById("showStr").style.display = "";
  document.getElementById("showStr").innerText = http.responseText;
 　 }
 }
 else
 {
 　　 alert("你所请求的页面发生异常，可能会影响你浏览该页的信息！");
 　　 alert(http.status);
 }
 }
}
//检验输入密码
function chkpassword()
{
 var m=document.form1;
 if(m.password.value.length>20 || m.password.value.length<6 )
 {
 document.getElementById("passwordStr").style.display = "";
　 document.getElementById("password").style.background= "#FF0000";
　 document.getElementById("passwordStr").innerText = "对不起,密码必须为英文字母、数字或下划线，长度为6~20!";
 }
 else
 {
　 document.getElementById("password").style.background= "#FFFFFF";
　 document.getElementById("passwordStr").style.display = "none";
 }
}
//验证两次密码是否一致
function chkconfirmPassword()
{
 var m=document.form1;
　 if (m.password.value != m.confirmPassword.value)
　 {
　　 document.getElementById("confirmPasswordStr").style.display = "";
　　 document.getElementById("confirmPassword").style.background= "#FF0000";
　　 document.getElementById("confirmPasswordStr").innerText = "对不起,密码与重复密码不一致!";
　 }
　 else
　 {
　　 document.getElementById("confirmPassword").style.background= "#FFFFFF";
　　 document.getElementById("confirmPasswordStr").style.display = "none";
　 }
} 
//验证Email是否有效
function chkEmail()
{
 var m=document.form1;
 var email = m.email.value; 
 //正则表达式
　 var regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; 
　 var flag = regex.test(email);   
　 if(!flag) 
　 {
  document.getElementById("emailStr").style.display = "";
　　 document.getElementById("email").style.background= "#FF0000";
　　 document.getElementById("emailStr").innerText = "对不起,邮箱地址无效！"; 
　 } 
　 else 
　 { 
  document.getElementById("email").style.background= "#FFFFFF";
　　 document.getElementById("emailStr").style.display = "none"; 
　 }
 
}
//提交检查函数 
function SubmitCheck()
{
 var m=document.form1; 
 if(m.userName.value.length==0)
 {
　 alert("对不起,用户名必须为英文字母、数字或下划线，长度为5~20。");
　 m.userName.focus();
　 return false;
 }
 if(m.password.value.length==0)
 {
　 alert("对不起,密码必须为英文字母、数字或下划线，长度为5~20。");
　 m.password.focus();
　 return false;
 }
 if (m.password.value != m.confirmPassword.value)
 {
　 alert("对不起,密码与重复密码不一致!");
　 m.confirmPassword.focus();
　 return false;
 } 
 if(m.email.value.length==0)
 {
　 alert("对不起,邮箱地址不能为空！！");
　 m.email.focus();
　 return false; 
 }
 m.submit();
}
//--> 
</script>
<body >
<form name="form1" method="post" action="register.php">
<h3 align="center">Ajax用户注册程序</h3>
<table align="center" width="500" border="1" >
 <tr>
 <td><font color="red">*</font></td>
 <td width="100">用户帐号:</td>
 <td><input type="text" name="userName" maxlength="20" style="background=#FFFFFF" onBlur="chkUser()"></td>
 <td><p id="showStr" style="background-color:#FF9900;display:none"></p></td>
 </tr>
 <tr>
 <td><font color="red">*</font></td>
 <td>用户密码:</td>
 <td align="left"><input type="password" name="password" maxlength="22" style="background=#FFFFFF" onBlur="chkpassword()"/> </td>
 <td><p id="passwordStr" style="background-color:#FF9900;display:none"></p></td>
 </tr>
 <tr>
 <td><font color="red">*</font></td>
 <td>确认密码:</td>
 <td><input type="password" name="confirmPassword" maxlength="20" style="background=#FFFFFF" onBlur="chkconfirmPassword()"/></td>
 <td><p id="confirmPasswordStr" style="background-color:#FF9900;display:none"></p></td>
 </tr>
 <tr>
 <td><font color="red">*</font></td>
 <td>Email:</td>
 <td><input type="text" name="email" maxlength="100" style="background=#FFFFFF" onBlur="chkEmail()"></td>
 <td><p id="emailStr" style="background-color:#FF9900;display:none"></p></td>
 </tr>
</table>
<p align="center"> 
 
　 <input type="button" name="ok" value=" 确定 " onClick="SubmitCheck()">
　 <input type="reset" name="reset" value=" 取消 ">
 </form>
</p>
</body>
</html>

上面是我整理给大家的，希望今后会对大家有帮助。

浅谈ajax请求技术

Ajax全局加载框(Loading效果)的配置

Ajax加载菊花loding效果

Atas ialah kandungan terperinci 非常实用的ajax用户注册模块. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Wuchang: Bulu Jatuh - Kaisar Naga Zhu Youja Boss Fight Guide

1 bulan yang lalu By DDD

Cara melaporkan akaun penyamaran di Instagram

4 minggu yang lalu By 下次还敢

Cara Mengubah Keperibadian ChatGPT dalam Tetapan (Cynic, Robot, Pendengar, Nerd)

3 minggu yang lalu By DDD

Cara melawan Eris di neon Abyss

3 minggu yang lalu By Jack chen

Pokémon TCG Scarlet & Violet: Kajian Kotak Jurulatih Elite Black Bolt

1 bulan yang lalu By Jack chen

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Tutorial PHP

1607

276

Setting up and using Magic Mouse in Windows

Tunjukkan Lagi

Related knowledge

Senarai Fungsi Login Pengguna Laravel Apr 18, 2025 pm 01:06 PM

Membina keupayaan log masuk pengguna di Laravel adalah tugas penting dan artikel ini akan memberikan gambaran keseluruhan yang menyeluruh yang meliputi setiap langkah kritikal dari pendaftaran pengguna untuk log masuk pengesahan. Kami akan menyelam ke dalam kuasa keupayaan pengesahan terbina dalam Laravel dan membimbing anda melalui penyesuaian dan memperluaskan proses log masuk untuk memenuhi keperluan tertentu. Dengan mengikuti arahan langkah demi langkah ini, anda boleh membuat sistem log masuk yang selamat dan boleh dipercayai yang menyediakan pengalaman akses yang lancar untuk pengguna aplikasi Laravel anda.

Dalam pembangunan back-end, bagaimana membezakan tanggungjawab lapisan perkhidmatan dan lapisan DAO? Apr 19, 2025 pm 01:51 PM

Membincangkan seni bina hierarki dalam pembangunan back-end. Dalam pembangunan back-end, seni bina hierarki adalah corak reka bentuk yang sama, biasanya termasuk pengawal, perkhidmatan dan tiga lapisan DAO ...

Pergi Pendaftaran Pengguna Bahasa: Bagaimana Meningkatkan Kecekapan Pengiriman E -mel? Apr 02, 2025 am 09:06 AM

Pengoptimuman kecekapan menghantar e -mel dalam fungsi pendaftaran bahasa Go. Dalam proses pembelajaran pergi pembangunan backend bahasa, semasa melaksanakan fungsi pendaftaran pengguna, sering kali perlu menghantar dorongan ...

Pemalam pendaftaran produk yang disyorkan untuk WordPress yang mudah digunakan Apr 20, 2025 am 08:15 AM

Tidak ada plugin pendaftaran produk WordPress yang sempurna, pilihan harus berdasarkan keperluan sebenar dan saiz laman web. Plug-in yang disyorkan termasuk: AhliPress: Konfigurasi Konfigurasi Kompleks yang Berkuatkuas

Konsistensi utama dalam sistem yang diedarkan: Bagaimana untuk memohon dan bagaimana untuk mengimbangi ketidakkonsistenan data? Apr 19, 2025 pm 02:24 PM

Meneroka penerapan konsistensi muktamad dalam sistem yang diedarkan pemprosesan transaksi yang diedarkan selalu menjadi masalah dalam seni bina sistem yang diedarkan. Untuk menyelesaikan masalah ...

Bagaimana untuk melaksanakan data sharding di MySQL? Kaedah pengoptimuman sharding Jun 04, 2025 pm 06:30 PM

MySQL sendiri tidak mempunyai fungsi sharding data terbina dalam, tetapi boleh dilaksanakan melalui reka bentuk dan alat seni bina. Sharding data adalah untuk memecah data jadual besar ke dalam pelbagai pangkalan data atau jadual mengikut peraturan untuk meningkatkan prestasi. Kaedah pelaksanaan biasa termasuk: 1. Serpihan hash oleh ID Pengguna, yang sama rata tetapi menyusahkan untuk mengembangkan kapasiti; 2. Serpihan mencukur mengikut julat, yang sesuai untuk medan kelas masa tetapi mudah untuk bintik-bintik panas; 3. Algoritma hashing yang konsisten, yang mengurangkan jumlah penghijrahan pengembangan tetapi pelaksanaan yang kompleks. Selepas sharding, pertanyaan silang, penghijrahan data, urus niaga yang diedarkan dan masalah lain perlu ditangani. Middleware seperti MyCat, Vitess atau Lapisan Logik Logik Pemprosesan boleh digunakan, dan kekunci Shard harus dipilih dengan munasabah, baki shard harus dipantau, sharding yang berlebihan harus dielakkan, dan strategi sandaran harus diperbaiki.

Bina sistem blog dengan Laravel (dengan Pengesahan Pengguna) Apr 30, 2025 pm 02:00 PM

Gunakan rangka kerja Laravel untuk membina sistem blog yang berfungsi sepenuhnya dan mengintegrasikan fungsi pengesahan pengguna. 1) Memahami seni bina MVC Laravel, termasuk model, pandangan dan pengawal. 2) Gunakan sistem pengesahan pengguna Laravel untuk mencapai pendaftaran, log masuk dan pengurusan kebenaran. 3) Tentukan pemetaan kaedah URL dan pengawal melalui definisi laluan untuk merealisasikan operasi CRUD artikel. 4) Mengoptimumkan prestasi sistem, gunakan caching dan paging, dan ikuti amalan terbaik seperti pembacaan kod dan pembangunan yang didorong oleh ujian.

Adakah laman web rasmi OKX Exchange menyokong lebih banyak pendaftaran pengguna kebangsaan pada tahun 2025? (2025 versi terkini) May 08, 2025 pm 10:06 PM

OKX Exchange kini menyokong pendaftaran dan perdagangan pengguna di banyak negara dan kawasan di seluruh dunia, termasuk tanah besar China, Amerika Syarikat, Kanada, United Kingdom, Australia, dan lain -lain. Langkah -langkah pendaftaran termasuk: 1 Lawati laman web rasmi OKX, 2. Klik butang pendaftaran, 3. Isi maklumat pendaftaran, 4. Proses transaksi adalah: 1.

See all articles