非常に実用的な ajax ユーザー登録モジュール-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

非常に実用的な ajax ユーザー登録モジュール

亚连

May 23, 2018 pm 04:00 PM

ajax モジュールユーザー登録

この記事では、主に非常に実用的な ajax ユーザー登録モジュールを詳細に紹介します。興味のある友人は参考にしてください。ウェブサイトのデザインでは、特にインタラクティブなウェブサイトでは、ajax テクノロジーの使用が非常に一般的になっています。ほとんどすべてのインタラクティブな Web サイトアプリケーションでは、会員登録などの大規模な Web サイト、更新なしのページング技術などの小規模な Web サイト、より良いユーザーエクスペリエンスを実現するための部分的な Web サイトのデザインで、Ajax テクノロジーがさらに不可欠になります。特定の部分の閲覧でエラーが発生した場合でも、Web ページ全体を更新する必要はありません。最も広く使用されている部分は、会員登録の非更新検証、非更新ページング、非更新ページングなどです。、データベース内のコンテンツが更新せずに存在するかどうかをクエリするなど。

以下は、ajax ユーザー登録モジュールです。この ajax 登録モジュールは、必要に応じて拡張するだけで済みます。これは、クエリデータファイルです。これを独自のものに変更するだけで、わかりやすくなり、必要に応じてダウンロードして確認できます。

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グローバルローディングボックスの構成(ローディングエフェクト)

Ajaxローディング菊ローディングエフェクト

以上が非常に実用的な ajax ユーザー登録モジュールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undress AI Tool

脱衣画像を無料で

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Laravel チュートリアル

1604

PHP チュートリアル

1510

276

Related knowledge

Deepseekの公式ウェブサイトの入り口と最新のプロモーションアクティビティ Feb 19, 2025 pm 05:15 PM

Deepseekの公式Webサイトは現在、ユーザーにショッピングエクスペリエンスを提供するための複数の割引アクティビティを開始しています。新規ユーザーはサインアップして10ドルのクーポンを取得し、視聴者全員に15％の限定時間割引を享受します。友人は報酬を獲得することもできます。また、買い物時に贈り物を償還するためにポイントを蓄積することができます。イベントの締め切りは違う。

Laravelユーザーログイン機能リスト Apr 18, 2025 pm 01:06 PM

Laravelのユーザーログイン機能の構築は重要なタスクであり、この記事では、ユーザー登録からログイン検証までのすべての重要なステップをカバーする包括的な概要を提供します。 Laravelの組み込み検証機能の力に飛び込み、特定のニーズに合わせてログインプロセスをカスタマイズして拡張することをガイドします。これらのステップバイステップの手順に従うことにより、Laravelアプリケーションのユーザーにシームレスなアクセスエクスペリエンスを提供する安全で信頼性の高いログインシステムを作成できます。

バックエンド開発では、サービスレイヤーとDAOレイヤーの責任をどのように区別するか？ Apr 19, 2025 pm 01:51 PM

バックエンド開発における階層アーキテクチャの議論。バックエンド開発では、階層アーキテクチャは一般的にコントローラー、サービス、DAOの3層を含む一般的な設計パターンです...

セサミオープンドア公式ウェブサイト取引プラットフォームセサミオープンドア公式ウェブサイト交換登録の入り口 Feb 28, 2025 am 10:57 AM

Gate.io Sesame Openは、Fiat Currency Trading、Currency Trading、Leveraged Trading、Perpetual Contracts、ETFレバレッジドトークン、ウェルスマネジメント、スタートアップの初期公募など、ユーザーにセキュリティ、安定性、オープン性、透明度を提供するなど、世界をリードするブロックチェーンデジタル資産取引プラットフォームです。

言語ユーザー登録：電子メールの送信効率を改善する方法は？ Apr 02, 2025 am 09:06 AM

GO言語登録機能を送信する電子メールの効率の最適化。 GO Language BackEnd開発の学習の過程で、ユーザー登録機能を実装するときは、衝動を送る必要があることがよくあります...

gate.io交換初心者登録と取引チュートリアル Feb 21, 2025 pm 09:54 PM

Gate.io Exchangeは、世界有数の暗号通貨取引プラットフォームの1つです。このガイドは、ユーザーがgate.ioと登録および取引するのを支援するための段階的なチュートリアルを提供します。登録プロセスには、登録方法（電話、電子メール、またはソーシャルアカウント）の選択、情報の記入、ログインパスワードの設定、ID認証の完了が含まれます。取引チュートリアルには、取引ページへのアクセス、取引ペアの選択、取引情報の入力、注文の掲載、注文ステータスの表示が含まれます。この記事のガイダンスにより、ユーザーはgate.ioで暗号通貨の取引を簡単に開始できます。

分散システムの最終的な一貫性：適用する方法とデータの矛盾を補う方法は？ Apr 19, 2025 pm 02:24 PM

分散システム分散トランザクション処理における最終的な一貫性の適用を調査することは、分散システムアーキテクチャにおいて常に問題となっています。問題を解決するために...

使いやすいWordPressのための推奨製品登録プラグイン Apr 20, 2025 am 08:15 AM

完全なWordPress製品登録プラグインはありません。選択は、実際のニーズとWebサイトのサイズに基づいている必要があります。推奨されるプラグインは次のとおりです。メンバープレス：強力だが高価で複雑な構成制限コンテンツプロ：コンテンツの制限とメンバー管理に焦点を当て、費用対効果の高いデジタルダウンロード：デジタル製品を販売し、ユーザーが追加機能として登録

See all articles