Webフロントエンドシーズン4(jQuery):6:601-jQuery共通プラグイン+602-エディタープラグインと検証プラグインのダウンロード+603-検証を使用してユーザー名を検証する

コンテンツ

まず、目的

1.考える:フロントエンドの知識を学ぶ

2.考える:メモを取る。次にビデオを見る必要がないときは、メモを見るだけですぐに思い出すことができます。

2.リファレンス

1.自分のコードのGitHubURL

2. SIKI Academy:練習のためにこのビデオを参照します

3.w3school公式ウェブサイト:辞書として使用する

4.新人チュートリアル:辞書として使用

5. Webフロントエンドシーズン1(HTML):私自身のメモ取りブログ

6. Webフロントエンドシーズン2(CSS):私自身のメモブログ

7. Webフロントエンドシーズン3(JavaScript):私自身のメモを取るブログ

3.注意

操作:1:成功:601-jQuery Common Plugin One

1.検証:検証プラグイン

2.pickadate:モバイルフレンドリーでレスポンシブで軽量なjQueryの日付と時刻の入力セレクタプラグインです

3.Apache ECharts:JavaScriptベースのオープンソースビジュアルチャートライブラリ

4. ckeditor:協調編集機能を備えたインテリジェントなリッチテキストエディターコンポーネント  

アクション:2:成功:602-エディタープラグインと検証プラグインのダウンロード

1.検証:検証プラグイン

1.圧縮されたパッケージの説明

1.プロジェクトにコピーします

アクション:3:成功:603-verifyでユーザー名を確認します

1.注:

 1.実行結果:


まず、目的

1.考える:フロントエンドの知識を学ぶ

2.考える:メモを取る。次にビデオを見る必要がないときは、メモを見るだけですぐに思い出すことができます。

2.リファレンス

1.自分のコードのGitHubURL

GitHub-xzy506670541 / WebTest:SIKIアカデミーのWebフロントエンド

2. SIKI Academy:練習のためにこのビデオを参照します

ログイン-SiKiAcademy-人生は無限大、学習は無限大!

  1. 練習のためにこのビデオを参照します

3.w3school公式ウェブサイト:辞書として使用する

w3schoolオンラインチュートリアル

4.新人チュートリアル:辞書として使用

ルーキーチュートリアル-学習はテクノロジーであるだけでなく、夢でもあります。

5. Webフロントエンドシーズン1(HTML):私自身のメモ取りブログ

Webフロントエンドシーズン1(HTML):1:101-なぜWebフロントエンドを学ぶのですか?+102-HTMLとは何ですか?+103-インストールツールと学習方法+04-最初のWebページファイルを作成しますアクション:成功1.HTMLとは何ですか。1.なぜHTMLを学ぶのですか?1.このコースの対象は?1。Webフロントエンドエンジニアとバックエンドの関係1.どの開発ツールが使用されていますか?1.勉強する方法は?1.操作:最初のWebページ:1。目的1.2.リファレンス1.SIKIアカデミーログイン-SiKiアカデミー-人生は無限であり、学習は無限です!私はこのビデオ練習を参照します1.Nodepad++公式ウェブサイトhttps:https: //blog.csdn.net/qq_40544338/article/details/120907015

6. Webフロントエンドシーズン2(CSS):私自身のメモブログ

Webフロントエンドシーズン2(CSS):1:101-CSS+102とは-HBuilder+103とは-divタグとspanタグとは+104-ブロック要素とインライン要素の違い+105-CSS基本構文_Smart_zyブログ-CSDNブログディレクトリ1.目的1.考える:フロントエンドの知識を学ぶ2.考える:メモを取る。次回はビデオを見る必要はありません。メモを見るだけですぐに思い出せます。2.参照1.自分のコードのGitHubURL1. SIKI Academy:練習のためにこのビデオを参照します1. W3school公式Webサイト:辞書として使用します1. Rookieチュートリアル:辞書として使用します3.注4.操作:1:成功:101-CSSとは何ですか?1.成功:CSSとは何かを理解する4.操作:2:102-HBuilder1をダウンロードしてインストールします。ダウンロード:公式ウェブサイトにHBuilder(以前のバージョン)がなく、すべてHBuilderX1であることがわかりました。プロジェクトを作成します。https ://blog。csdn.net/qq_40544338/article/details/120968455

7. Webフロントエンドシーズン3(JavaScript):私自身のメモを取るブログ

Webフロントエンドシーズン3(JavaScript):1:第1章:JavaScriptの基本:101-JavaScript言語とは+102-最初のJavaScriptコードを書く+103-jscode_Smart_zyのブログを書く3つの方法-CSDNブログディレクトリ1.目的1 .考える:フロントエンドの知識を学ぶ2.考える:メモを取る、次にビデオを見る必要がないときは、メモを見るだけですぐに思い出すことができます。2.参照1.自分のコードのGitHubURL1. SIKI Academy:練習のためにこのビデオを参照します1. W3school公式Webサイト:辞書として使用します1. Rookieチュートリアル:辞書として使用します3.注4.操作:1:成功:101-JavaScript言語とは1. JSの概要4.操作:2:成功:102-最初のJavaScriptコードを記述します1.新しいプロジェクト:1。実行結果:成功:警告ウィンドウから飛び出します4.操作:3:成功:103-書き込みj。https: //blog.csdn.net/qq_40544338/article/details/121351279

3.注意

操作:1:成功:601-jQuery Common Plugin One

jQueryプラグイン1、     jQueryは特に拡張が簡単で、開発者はjQuery 2、プラグイン
に基づいて拡張された運動エネルギーを開発できます。


1.検証:検証プラグイン

URL

https://jqueryvalidation.org/documentation/

デモ

https://jqueryvalidation.org/files/demo/marketo/

2.pickadate:モバイルフレンドリーでレスポンシブで軽量なjQueryの日付と時刻の入力セレクタプラグインです

URL:  pickadate.js中国のWebサイト| Pickadate.jsは、モバイルフレンドリーでレスポンシブで軽量なjQueryの日付と時刻の入力ピッカープラグインです。

3.Apache ECharts:JavaScriptベースのオープンソースビジュアルチャートライブラリ

URL:

Apache ECharts

4. ckeditor:協調編集機能を備えたインテリジェントなリッチテキストエディターコンポーネント  

0042址:コラボレーティブリッチテキスト編集機能を備えたWYSIWYGHTML エディター

アクション:2:成功:602-エディタープラグインと検証プラグインのダウンロード

1.検証:検証プラグイン

公式サイト:  https ://jqueryvalidation.org/

各バージョンのダウンロードアドレスを確認します。

リリース・jquery-validation / jquery-validation・GitHub

1.17.0ダウンロードURL

リリース1.17.0/2017-07-20・jquery-validation / jquery-validation・GitHub

1.圧縮されたパッケージの説明

1.プロジェクトにコピーします

アクション:3:成功:603-verifyでユーザー名を確認します

1.注:

1.プラグインはjsディレクトリの下に配置する必要があり、他のディレクトリの下に配置することはできません

 1.実行結果:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="js/jquery.validate.min.js"></script>
		<script type="text/javascript" src="js/messages_zh.min.js"></script>

		<script type="text/javascript">
			var validateRule = {
				rules: {
					username: {
						required: true,
						minlength: 3,
						maxlength: 6
					}
				}
			};
			
			$(function() {
				$("#registerForm").validate(validateRule);
			});
			
		</script>
	</head>
	<body>
		<form action="register.jsp" id="registerForm">
			<table border="1" width="800px" height="500px">
				<tr>
					<td colspan="2" align="center">注册</td>
				</tr>
				<tr>
					<td align="right" width="100px">用户名:</td>
					<td align="left"> <input type="text" name="username" />

					</td>
				</tr>
				<tr>
					<td align="right">邮箱:</td>
					<td> <input type="text" name="email" /></td>
				</tr>
				<tr>
					<td align="right">密码:</td>
					<td> <input type="password" name="password" /> </td>
				</tr>
				<tr>
					<td align="right">重复密码:</td>
					<td> <input type="password" name="rePassword" /> </td>
				</tr>
				<tr>
					<td align="right">出生年月日:</td>
					<td> <input type="text" name="birthday" /> </td>
				</tr>
				<tr>
					<td align="right">性别:</td>
					<td> 男 <input type="radio" name="sex" /> 女 <input type="radio" name="sex" />
						<label for="sex" class="error"></label>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center"> <input type="submit" value="注册" /> </td>
				</tr>
			</table>
		</form>
	</body>
</html>

おすすめ

転載: blog.csdn.net/qq_40544338/article/details/122173599