JS開発検証フォームチュートリアルのプロジェクト紹介

本講座では、「JavaScript開発検証フォーム」の開発をコースプロジェクト例として、「JavaScript開発検証フォーム」開発の考え方を解説します。

準備:

新しい form.html ページを作成し、レイアウトして js コードを記述します。

検証フォームを作成するためのフローチャートを見てみましょう。

流程图.png

フローチャートを説明しましょう

1. まず、ユーザー名が空であるかどうかを判断する必要があります。空でない場合は、要件を満たしているかどうかを判断します。仕様を満たしている場合は、プロンプトメッセージが表示されます。引き続き検証していきます。

2. パスワードが空であるかどうかを確認します。空でない場合は、仕様を満たしているかどうかを確認するメッセージが表示されます。

3 次に、電子メールアドレスを決定します。空でない場合は、正規表現の一致を使用して、電子メールの形式に準拠しているかどうかを確認します。

4 ホビーが空かどうかを判断する際、空でない場合はプロンプトメッセージが表示され、仕様を満たしているかどうかを確認します。

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="div"> <form> <label>用户名:</label> <input type="text" class="name" id="name"> <div id="sp" class="div"></div> <label>密码:</label> <input type="password" class="pwd" id="pwd"> <div id="sp1" class="div"></div> <label>邮箱:</label> <input type="text" class="email" id="email"> <div id="sp2" class="div"></div> <label>爱好:</label> <textarea rows="5" cols="30" class="txt" id="txt"></textarea> <div id="sp3" class="div"></div> <input type="button" class="sub" value="注册" id="sub"> </form> </div> </body> </html>

提出するリセットコード

自動運転