jsでユーザー登録機能を実装する
|
この記事の例では、ユーザー登録機能を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 1.HTMLコード構造
<本文>
<FORM action="success.html" method="post" name="myform" onSubmit="return checkForm()">
<表の境界線="0" セルのパディング="0" セルの間隔="0" 配置="中央">
<TR>
<TD height="108" colspan="2"><IMG src="D:\Microsoft VS Code\421\img\touxiang.png"></TD>
</TR>
<TR>
<TD width="107" height="36">ユーザー名:</TD>
<TD width="524"><INPUT name="txtUser" type="text" maxlength="16">文字または数字のみ、4～16 文字</TD>
</TR>
<TR>
<TD width="107" height="36">パスワード:</TD>
<TD width="524"><INPUT name="txtPass" type="password">パスワードの長さは 6 ～ 12 文字です</TD>
</TR>
<TR>
<TD width="107" height="36">パスワードの確認:</TD>
<TD width="524"><INPUT name="txtRPass" type="password"></TD>
</TR>
<TR>
<TD width="107" height="36">性別:</TD>
<TD 幅="524">
<INPUT name="gen" type="radio" value="Male" チェック済み>男性
<INPUT name="gen" type="radio" value="女" class="input">女</TD>
</TR>
<TR>
<TD width="107" height="36">メールアドレス:</TD>
<TD width="524"><INPUT name="txtEmail" type="text">
有効なメールアドレスを入力してください</TD>
</TR>
<TR>
<TD width="107" height="36">生年月日:</TD>
<TD 幅="524">
<INPUT name="year" id="year" size=4 maxlength=4 > 年
<SELECT name="月" >
<OPTION value=1>1月</OPTION>
<OPTION value=2>2月</OPTION>
<OPTION value=3>3月</OPTION>
<OPTION value=4>4月</OPTION>
<OPTION value=5>5月</OPTION>
<OPTION value=6>6月</OPTION>
<OPTION value=7>7月</OPTION>
<OPTION value=8>8月</OPTION>
<OPTION value=9>9月</OPTION>
<OPTION value=10>10月</OPTION>
<OPTION value=11>11月</OPTION>
<OPTION value=12>12月</OPTION>
</SELECT> 月
<SELECT name="日" >
<OPTION 値=1>1</OPTION><OPTION 値=2>2</OPTION><OPTION 値=3>3</OPTION><OPTION 値=4>4</OPTION>
<OPTION 値=5>5</OPTION><OPTION 値=6>6</OPTION><OPTION 値=7>7</OPTION><OPTION 値=8>8</OPTION>
<OPTION 値=9>9</OPTION><OPTION 値=10>10</OPTION><OPTION 値=11>11</OPTION><OPTION 値=12>12 </OPTION>
<OPTION 値=13>13</OPTION><OPTION 値=14>14</OPTION><OPTION 値=15>15</OPTION><OPTION 値=16>16</OPTION>
<OPTION 値=17>17</OPTION><OPTION 値=18>18</OPTION><OPTION 値=19>19</OPTION><OPTION 値=20>20</OPTION>
<OPTION 値=21>21</OPTION><OPTION 値=22>22</OPTION><OPTION 値=23>23</OPTION><OPTION 値=24>24</OPTION>
<OPTION 値=25>25</OPTION><OPTION 値=26>26</OPTION><OPTION 値=27>27</OPTION><OPTION 値=28>28</OPTION>
<OPTION 値=29>29</OPTION><OPTION 値=30>30</OPTION><OPTION 値=7>31</OPTION>
</SELECT> 日</TD>
</TR>
<TR>
<TD colspan="2" align="center">
<INPUT type="submit" value="以下の規約に同意して送信">
</TD>
</TR>
<TR>
<TD colspan="2">
<TEXTAREA cols="" rows="" readOnly="true" style="width:480px;height:110px;font-size:12px;color: #666">
I. 一般規定 1.1 ユーザーは本契約の条件に同意し、ページの指示に従ってすべての登録手続きを完了するものとします。ユーザーが登録プロセス中に「同意する」ボタンをクリックすると、ユーザーは Baidu と合意に達し、本契約のすべての条件を完全に受け入れたことになります。
1.2 ユーザーが正常に登録すると、Baidu は各ユーザーにユーザー アカウントと対応するパスワードを付与します。ユーザーはユーザー アカウントとパスワードを保持する責任を負い、ユーザー アカウントを使用して実行されるすべてのアクティビティとイベントに対して法的責任を負うものとします。
1.3 ユーザーは、Baidu の各チャネルの個別サービスを利用することができます。ユーザーが Baidu の個別サービスを利用する場合、その利用行為は、個別サービスの利用規約および Baidu が個別サービス内で発する各種告知に同意したものとみなされます。
1.4 Baidu 会員サービス契約および各チャネルの個別のサービス条件とお知らせは、Baidu によって予告なくいつでも更新される場合があります。関連するサービスをご利用になる場合は、適用される条件に注意し、遵守する必要があります。
Baidu が提供するサービスをご利用になる前に、このサービス契約をよくお読みください。お客様が本サービス契約および/またはその変更にいつでも同意しない場合は、Baidu が提供するサービスを積極的にキャンセルすることができます。Baidu サービスを利用すると、Baidu がいつでも行うサービス契約の変更を含め、本サービス契約のすべての内容を理解し、完全に同意したものとみなされ、Baidu ユーザーになります。
</テキストエリア>
</TD>
</TR>
</表>
</フォーム>
</本文>写真は自分で追加する必要があることに注意してください
2.JSコード構造
<SCRIPT type="text/javascript" language="javascript">
関数 checkForm(){
if(checkUserName()&&checkPass()&&checkEmail()&&checkDate()){
true を返します。
}それ以外{
false を返します。
}
}
//ユーザー名が空でないかどうかの検証 + 長さの検証 + 合法性の検証関数 checkUserName(){
var name = document.myform.txtUser;
if(name.value==""){
alert("ユーザー名を入力してください");
名前.focus();
false を返します。
}else if(name.value.length<4||name.value.length>16){//ユーザー名の長さの確認アラート("入力されたユーザー名の長さは 4 ～ 16 文字です");
名前を選択します。
false を返します。
}
//ユーザー名入力の正当性検証 for(var i=0;i<name.value.length;i++)
{
var charTest = name.value.toLowerCase().charAt(i);
if( (!(charTest>='0' && charTest<='9')) && (!(charTest>='a' && charTest<='z')) && (charTest!='_') )
{
alert("メンバー名に不正な文字が含まれています。使用できるのは a ～ z、0 ～ 9、およびアンダースコアのみです");
名前を選択します。
false を返します。
}
}
true を返します。
}
//パスワードが空でないかどうかの検証 + 確認の検証 + 長さの検証関数 checkPass(){
var pass=document.myform.txtPass;
var rpass=document.myform.txtRPass;
if(pass.value==""){
alert("パスワードは空にできません");
パス.focus();
false を返します。
}そうでない場合(pass.value.length<6||pass.value.length>12){
alert("パスワードは6〜12文字でなければなりません");
パスを選択します。
false を返します。
}
//パスワードの一貫性検証を確認する if (rpass.value!=pass.value) {
alert("確認パスワードは入力したパスワードと一致しません");
rpass.select();
false を返します。
}
true を返します。
}
//メール検証関数 checkEmail(){
var strEmail=document.myform.txtEmail;
(strEmail.value.length==0)の場合
{
alert("メールアドレスは空欄にできません!");
strEmail.focus();
false を返します。
}そうでない場合 (strEmail.value.indexOf("@",0)==-1)
{
alert("メールの形式が正しくありません\n@記号を含める必要があります!");
strEmail.select();
false を返します。
}そうでない場合 (strEmail.value.indexOf(".",0)==-1){
alert("メールの形式が正しくありません。. 記号が含まれている必要があります!");
strEmail.select();
false を返します。
} //@ と . 文字は文頭には使用できません else if(strEmail.value.charAt(0)=="@"||strEmail.value.charAt(0)=="."){
alert("@ および . 記号は電子メール アドレスの先頭には使用できません");
strEmail.select();
falseを返す;+
} //@ および . 文字は文末には使用できません。else if(strEmail.value.charAt(strEmail.value.length-1)=="@"||strEmail.value.charAt(strEmail.value.length-1)=="."){
alert("@ および . 記号は電子メール アドレスの最後の桁として使用できません");
strEmail.select();
false を返します。
}
true を返します。
}
//生年月日を確認する function checkDate(){
var year = document.myform.year;
var time = 新しい Date();
if(year.value==""){//空でない検証アラート("生年月日を入力してください");
年.フォーカス();
false を返します。
}else if(isNaN(year.value)){//数値検証アラート("数値を入力してください");
年.フォーカス();
false を返します。
}else if(parseInt(year.value)<1949||parseInt(year.value)>time.getYear()){//入力範囲検証アラート("年範囲は1949年から"+time.getYear()+"year");
年を選択します();
false を返します。
}それ以外{
true を返します。
}
}
</スクリプト>3. 効果は次のように表示されます。
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: MySQL ダーティ ページ フラッシュとテーブル スペースの縮小の原理の分析
推薦する
Dockerイメージの作成とプロジェクト全体のワンクリックパッケージングとデプロイ
一般的な Dockerfile 命令の紹介命令説明するから新しいイメージが構築される基となるイメージ...
マルチコア CPU を使用して Linux コマンドを高速化する方法 (GNU Parallel)
非常に大量のデータ（数百 GB）を計算する必要があったことはありますか?または、その内部を検索したり...
Ubuntu で中国語入力方法が使えない場合の解決策
Ubuntu では中国語入力方法の解決策はありません。仮想マシンや Ubuntu システムをインスト...
SQL効率を分析する方法を説明する
Explain コマンドは、データベースのパフォーマンス問題を解決するために最初に推奨されるコマンド...
Nginx レベルで基本的なユーザー認証を構成する手順を完了します。
序文アプリケーション シナリオ: おそらく、内部 Web サイトは外部ユーザーにアクセス可能である必...
Mysql で group_concat の長さ制限を変更する方法
MySQL には、「group_concat」という関数があります。通常の使用では問題がないかもしれ...
MySQL カーソルの概念と使用法の詳細な説明
この記事では、例を使用して MySQL カーソルの概念と使用方法を説明します。ご参考までに、詳細は以...
JS における ES6 継承と ES5 継承の違い
目次継承ES5 プロトタイプ継承ES6 クラス継承両者の違いES5プロトタイプ継承の内部実装ES6 ...
IDEA を MYSQL データベースに接続するための構成時に失敗する問題の解決策
この記事では、主に、IDEA を MYSQL データベースに接続するための構成時に失敗する問題の解決...
Mysql5.7 以降での ONLY_FULL_GROUP_BY エラーの解決方法
最近、開発プロセス中に、プロジェクト開発環境に接続されている MySQL データベースは Aliba...
Winにmysqlをインストールする詳細な手順
この記事では、参考までにWinにmysqlをインストールする詳細な手順を紹介します。具体的な内容は次...
JS ネイティブ 2048 ゲーム ソース コード共有 (インターネットの最新情報)
最近、アルゴリズムについて学んでいて、アルゴリズムで動く小さなゲームに出会いました。そのコードは次の...
テーブルを作成するための MySQL SQL ステートメントの詳細な概要
mysql テーブル作成 SQL ステートメントMySQL テーブルを作成するための一般的な SQL...
便利でシンプルなMySQL関数10個
関数0. 現在の時刻を表示するコマンド: select now()。機能: 現在の時刻を表示します。...
JavaScript フレームワーク デザイン パターンの詳細な説明
目次動画最優秀選手ムヴヴムVueのソーススパ mpa要素を作成するクラス要約する動画 Model（模...