Web前端第四季(jQuery):六:601-jQuery常用插件+602-编辑器插件和validation插件的下载+603-使用validation校验用户名

目录一.目的1.想：学习前端知识2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。二.参考1.我自己代码的GitHub网址2.SIKI学院:我参考此视频实操3.w3school官网:当做字典使用4.菜鸟教程：当做字典使用5.Web前端第一季(HTML):我自己写的笔记博客6.Web前端第二季(CSS):我自己写的笔记博客7.Web前端第三季(JavaScript):我自己写的笔记博客三.

Smart_zy

426人浏览 · 2021-12-27 17:17:30

Smart_zy · 2021-12-27 17:17:30 发布

一.目的

1.想：学习前端知识

2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。

5.Web前端第一季(HTML):我自己写的笔记博客

6.Web前端第二季(CSS):我自己写的笔记博客

7.Web前端第三季(JavaScript):我自己写的笔记博客

三.注意

操作:1:成功:601-jQuery常用插件一

1.validation：校验插件

2.pickadate:是一个适应移动端，响应迅速且轻巧的jQuery日期和时间输入选择器插件

3.Apache ECharts：一个基于 JavaScript 的开源可视化图表库

4.ckeditor：具有协同编辑功能的智能富文本编辑器组件

操作:2:成功:602-编辑器插件和validation插件的下载

1.validation：校验插件

1.压缩包说明

1.复制到项目中

操作:3:成功:603-使用validation校验用户名

1.注意：

1.运行结果：

一.目的

1.想：学习前端知识

2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。

二.参考

1.我自己代码的GitHub网址

GitHub - xzy506670541/WebTest: SIKI学院的Web前端

2.SIKI学院:我参考此视频实操

我参考此视频实操

三.注意

操作: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 的开源可视化图表库

网址：

Apache ECharts

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>