jQuery plugin
1, jQuery is particularly easy to extend, developers can develop some extended kinetic energy based on jQuery
2, plugin: http://plugins.jquery.com/
3, verify pickadate Echarts
chosen ckeditor

1.validation: validation plugin

URL

https://jqueryvalidation.org/documentation/

Demo

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

2.pickadate: is a mobile-friendly, responsive and lightweight jQuery date and time input selector plugin

URL: pickadate.js Chinese website | Pickadate.js is a mobile-friendly, responsive and lightweight jQuery date and time input picker plugin

3.Apache ECharts: A JavaScript-based open source visual charting library

URL:

Apache ECharts

4. ckeditor: Intelligent rich text editor component with collaborative editing function

网址： WYSIWYG HTML Editor with Collaborative Rich Text Editing

Action: 2: Success: 602 - Download of editor plugin and validation plugin

1.validation: validation plugin

Official website: https://jqueryvalidation.org/

Verify each version download address:

Releases · jquery-validation/jquery-validation · GitHub

1.17.0 Download URL

Release 1.17.0 / 2017-07-20 · jquery-validation/jquery-validation · GitHub

1. Compressed package description

1. Copy into the project

Action: 3: Success: 603 - Verify username with verify

1. Note:

1. Plugins need to be placed under the js directory and cannot be placed under other directories

1. Running result:

<!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>

Web Front End Season 4 (jQuery): Six: 601 - jQuery common plugins + 602 - Download of editor plugins and validation plugins + 603 - Use validation to verify usernames

First, the purpose

1. Think: learn front-end knowledge

2. Thinking: Take notes, next time you don't need to watch the video, just look at the notes to quickly recall.

2. Reference

1. GitHub URL of my own code

2. SIKI Academy: I refer to this video for practice

3.w3school official website: use it as a dictionary

4. Rookie Tutorial: Use as a Dictionary

5. Web Front End Season 1 (HTML): My own note-taking blog

6. Web Front End Season 2 (CSS): My own note blog

7. Web Front End Season 3 (JavaScript): My own note-taking blog

3. Attention

Operation: 1: Success: 601-jQuery Common Plugin One

1.validation: validation plugin

2.pickadate: is a mobile-friendly, responsive and lightweight jQuery date and time input selector plugin

3.Apache ECharts: A JavaScript-based open source visual charting library

4. ckeditor: Intelligent rich text editor component with collaborative editing function

Action: 2: Success: 602 - Download of editor plugin and validation plugin

1.validation: validation plugin

1. Compressed package description

1. Copy into the project

Action: 3: Success: 603 - Verify username with verify

1. Note:

1. Running result:

Guess you like