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 ダーティ ページ フラッシュとテーブル スペースの縮小の原理の分析
推薦する
Pycharm2017はpython3.6とmysqlの接続を実現します
この記事では、pycharm2017でpython3.6とmysqlを接続する方法を参考までに紹介し...
Linux サーバーと Windows システム間でファイルをアップロードおよびダウンロードする方法
背景: Linux サーバーのファイルのアップロードとダウンロード。 XShell+Xftp インス...
組み込み Linux 開発環境で ping と nfs を構築するためのソリューション
1. 組み込みソフトウェアレベル 1) ブートローダ -> ブートローダ組み込みシステム全体の...
英語の単語の出現頻度を数えるtrコマンドの魔法
置換を削除したり文字列を削除したりできる tr コマンドは、誰もがよく知っています。 英語では、英語...
React で setInterval 関数を使用する例
この記事はWindows 10のシステム環境をベースに、Reactの学習と使用について説明しています...
MySQL 8.0 のデフォルトのデータディレクトリを変更する (設定なしの簡単な操作)
使用シナリオ: Alibaba Cloud を使用しており、データディスクを別途購入しました (大容...
Linux でのファイルの編集、保存、終了の実践的な説明
Linux でファイルを編集した後、保存して終了するにはどうすればよいですか?保存して終了するコマン...
Vue における ref と $refs の紹介と使用例
序文JavaScript では、document.querySelector("#demo...
InnoDB テーブルの BLOB 列と TEXT 列のストレージ効率を最適化します。
まず、MySQL InnoDB エンジンのストレージ形式に関する重要なポイントをいくつか紹介します。...
MySQL 5.7.18 マスタースレーブレプリケーション設定（マスター 1 台とスレーブ 1 台）チュートリアルの詳細な説明
1. 複製原理マスター サーバーはバイナリ ログ ファイルに更新を書き込み、ログのローテーションを追...
node.jsのインストールとHbuilderXの設定の詳細な説明
npm インストールチュートリアル: 1. Node.jsインストールパッケージをダウンロードする公...
MySQL 5.7.18 zip バージョンのインストール チュートリアル
MySQL の mysql 5.7.18 zip バージョンは、クリックして次のステップをクリックし...
Linuxのwhichコマンドの具体的な使い方
Linux でファイルを見つけたいのに、その場所がわからないことがよくあります。次のコマンドを使用し...
Docker 構成 Alibaba Cloud イメージアクセラレーション プル実装
今日はdockerを使ってイメージをpullしたのですが、速度が悪くて見れず最後まで待ち続けました。...
W3C チュートリアル (9): W3C XPath アクティビティ
XPath は、XML ドキュメントの一部を選択するための言語です。 XPath は、XSLT、XQ...