コンテンツ
2.考える:メモを取る。次にビデオを見る必要がないときは、メモを見るだけですぐに思い出すことができます。
2. SIKI Academy:練習のためにこのビデオを参照します
5. Webフロントエンドシーズン1(HTML):私自身のメモ取りブログ
6. Webフロントエンドシーズン2(CSS):私自身のメモブログ
7. Webフロントエンドシーズン3(JavaScript):私自身のメモを取るブログ
操作:1:成功:601-jQuery Common Plugin One
2.pickadate:モバイルフレンドリーでレスポンシブで軽量なjQueryの日付と時刻の入力セレクタプラグインです
3.Apache ECharts:JavaScriptベースのオープンソースビジュアルチャートライブラリ
4. ckeditor:協調編集機能を備えたインテリジェントなリッチテキストエディターコンポーネント
アクション:2:成功:602-エディタープラグインと検証プラグインのダウンロード
アクション:3:成功:603-verifyでユーザー名を確認します
まず、目的
1.考える:フロントエンドの知識を学ぶ
2.考える:メモを取る。次にビデオを見る必要がないときは、メモを見るだけですぐに思い出すことができます。
2.リファレンス
1.自分のコードのGitHubURL
GitHub-xzy506670541 / WebTest:SIKIアカデミーのWebフロントエンド
2. SIKI Academy:練習のためにこのビデオを参照します
ログイン-SiKiAcademy-人生は無限大、学習は無限大!
- 練習のためにこのビデオを参照します
3.w3school公式ウェブサイト:辞書として使用する
4.新人チュートリアル:辞書として使用
ルーキーチュートリアル-学習はテクノロジーであるだけでなく、夢でもあります。
5. Webフロントエンドシーズン1(HTML):私自身のメモ取りブログ
6. Webフロントエンドシーズン2(CSS):私自身のメモブログ
7. Webフロントエンドシーズン3(JavaScript):私自身のメモを取るブログ
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:
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>