目录
2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆。
7.Web前端第三季(JavaScript):我自己写的笔记博客
2.pickadate:是一个适应移动端,响应迅速且轻巧的jQuery日期和时间输入选择器插件
3.Apache ECharts:一个基于 JavaScript 的开源可视化图表库
4.ckeditor:具有协同编辑功能的智能富文本编辑器组件
操作:2:成功:602-编辑器插件和validation插件的下载
一.目的
1.想:学习前端知识
2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆。
二.参考
1.我自己代码的GitHub网址
GitHub - xzy506670541/WebTest: SIKI学院的Web前端
2.SIKI学院:我参考此视频实操
- 我参考此视频实操
3.w3school官网:当做字典使用
4.菜鸟教程:当做字典使用
5.Web前端第一季(HTML):我自己写的笔记博客
6.Web前端第二季(CSS):我自己写的笔记博客
7.Web前端第三季(JavaScript):我自己写的笔记博客
三.注意
操作:1:成功:601-jQuery常用插件一
jQuery插件
1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能
2,插件:http://plugins.jquery.com/
3,validation pickadate Echarts
chosen ckeditor
1.validation:校验插件
网址
https://jqueryvalidation.org/documentation/
Demo
https://jqueryvalidation.org/files/demo/marketo/
2.pickadate:是一个适应移动端,响应迅速且轻巧的jQuery日期和时间输入选择器插件
网址: pickadate.js 中文网 | Pickadate.js是一个适应移动端,响应迅速且轻巧的jQuery日期和时间输入选择器插件
3.Apache ECharts:一个基于 JavaScript 的开源可视化图表库
网址:
4.ckeditor:具有协同编辑功能的智能富文本编辑器组件
网址: WYSIWYG HTML Editor with Collaborative Rich Text Editing
操作:2:成功:602-编辑器插件和validation插件的下载
1.validation:校验插件
官网: https://jqueryvalidation.org/
validation各个版本下载地址:
Releases · jquery-validation/jquery-validation · GitHub
1.17.0 下载网址
Release 1.17.0 / 2017-07-20 · jquery-validation/jquery-validation · GitHub
1.压缩包说明
1.复制到项目中
操作:3:成功:603-使用validation校验用户名
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>