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 ダーティ ページ フラッシュとテーブル スペースの縮小の原理の分析
推薦する
Windows システムに VirtualBox と Ubuntu 16.04 をインストールするための詳細なチュートリアル
1. ソフトウェアの紹介バーチャルボックスVirtualBox は、無料のオープンソース仮想マシン ...
Linuxターミナルでファイルを作成する2つの一般的な方法を簡単に理解する
mkdir コマンドを使用して新しいディレクトリを作成できることは誰もが知っていますが、多くの場合、...
ハイパーリンクを使用してリンクファイルを開く HTML 方式の紹介
a および href 属性 HTML では、英語ではアンカーと呼ばれるハイパーリンクを表すために &...
Spring環境を構成するためのDocker-composeの手順
最近、メンバーがテストできるようにプロジェクトをパッケージ化する必要がありますが、パッケージ化された...
Nginx を使用してクロスドメイン Vue 開発環境を処理する方法
1. 需要正しい Cookie 配信と SSO テストを確実に実行できるように、ローカル テスト ド...
mysqlを完全にアンインストールします。個人テストです!
MySQL をクリーンアンインストールします。個人的にテストしたところ、今回はようやくうまくいきま...
JavaScript のショートカットのヒント
目次1. 配列を結合する2. 配列をマージする（最初に） 3. 配列の複製4. 構造化分解割り当て5...
WeChatミニプログラムのすべてのページがログインされていることを確認する方法
目次現状解決さらなる解決策やっと現状WeChat ミニプログラムには、ホームページ、個人ページ、いく...
JavaScript でピンボール ゲームの Web バージョンを実装する
参考までに、JavaScriptのオブジェクトとメソッドを使用して実装されたWebピンボールゲームを...
JSプロトタイプとプロトタイプチェーンについての簡単な説明
目次1. プロトタイプ2. プロトタイプポインタ: __proto__要約する1. プロトタイプJa...
Nginx コンテンツ キャッシュと共通パラメータ設定の詳細
使用シナリオ:プロジェクトのページでは、頻繁に変更されず、個別のカスタマイズも伴わない大量のデータを...
CSS インライン スタイル、埋め込みスタイル、外部参照スタイルを使用する 3 つの方法
3 つの方法を使用する簡単な例は次のとおりです。インラインスタイル: <!doctypehtm...
写真をアップロードして顔を認識する Vue+axios サンプルコード
目次Axios リクエストQs処理データ分析Vantアップロードファイル形式完全なコードこの記事では...
SSDストレージを有効にしたMySQLインスタンスの詳細な説明
SSDストレージを有効にしたMySQLインスタンスの詳細な説明特に OS と MySQL が同じディ...
MySQL における TIMESTAMPDIFF ケースの詳細な説明
1.構文TIMESTAMPDIFF(unit,begin,end); 単位に従って時間差を返します。...