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 ダーティ ページ フラッシュとテーブル スペースの縮小の原理の分析
推薦する
IE 8/Chrome/Firefox と互換性のあるコメント返信ポップアップマスク効果実装アイデア
平日はニュースに注目して、テンセントをよく閲覧しています。しかし、コメントへの返信はほとんど見られま...
CocosCreator システムイベントがどのように生成され、トリガーされるかについての詳細な説明
目次環境まとめモジュール機能関連文書ソースコード分析CCGame.js CCInputManager...
MySQL のロックとトランザクションの簡単な分析
MySQL 自体はファイルシステムに基づいて開発されましたが、ロックの存在が異なります。データベース...
CSS クリアフロートクリア:both サンプルコード
今日はフロートのクリアについてお話します。フロートのクリアについてお話する前に、フロートとは何かを理...
Filebeat を使用して Nginx ログを収集する方法
Nginx ログは、ユーザーの住所の場所や行動プロファイルなどを分析するために使用できます。Elas...
Dockerは異常なコンテナ操作を排除する
この初心者は、Docker を学び始めたばかりの頃にこのような問題に遭遇しました。記録しておきます。...
React における同期および非同期 setState の問題のコード分析
React は Facebook の社内プロジェクトとして始まりました。 React の出現は革命的...
Centos7 で NIS を構成する詳細な手順
目次原理ネットワーク環境の準備インストール前の準備NIS サーバー操作NIS クライアント操作原理N...
Javascript で関数のカリー化とデカリー化を実装する方法
関数のカリー化（黒い疑問符の顔）？ ? ?カレー（黒い疑問符の顔）？ ? ?これは完璧な中国語翻訳で...
HTML ではスペースはどのように表現されますか (どのような意味ですか)?
Web 開発では、次のような文字によく遭遇します: これは実際には HTML が...
MySQL デッドロック シナリオ例の分析
序文最近、MySQL で RR レベルでデッドロック問題に遭遇しました。興味深いと思ったので、調べて...
uniappのグローバル変数実装の詳細な説明
序文この記事では、uniapp グローバル変数の実装方法をいくつかまとめています。詳細な知識は、uV...
MySQLのビューとインデックスの使い方と違いの詳細な説明
MySQL ビュー簡単に言えば、MySQL ビューは SELECT コマンドを定義するためのショート...
Nexus を使用して Docker リポジトリを作成する方法
公式の Docker レジストリを使用して作成されたウェアハウスでは、イメージを削除してもデフォルト...
TCP 3 回目のハンドシェイク データ転送プロセス図
RFC793 ドキュメントの SYN フラグを持つプロセス パケットはデータを伝送できません。つま...