Fourth quarter of Web front end (jQuery): Seven: 604 - write validation verification rules + 605 - complete validation verification (end of course)

catalogue

I objective

1. Want to: Learn front-end knowledge

2. Think: take notes. Next time, you don't need to watch the video. You can quickly recall by looking at the notes directly.

II reference resources

1. GitHub website of my own code

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

3.w3school official website: used as a dictionary

4. Rookie tutorial: use as a dictionary

5.Web front end season 1 (HTML): my own note blog

6.Web front end season 2 (CSS): my own note blog

7.Web front end season 3 (JavaScript): my own note blog

III be careful

Operation: 1: Success: 604 - write validation verification rules

1. Operation result: successful

Operation: 2: Success: 605 - validation verification completed (end of course)

1. Operation result: successful

I objective

1. Want to: Learn front-end knowledge

2. Think: take notes. Next time, you don't need to watch the video. You can quickly recall by looking at the notes directly.

II reference resources

1. GitHub website of my own code

GitHub - xzy506670541 / WebTest: Web front end of Siki College

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

Login - SiKi College - life and learning!

  1. I refer to this video for practice

3.w3school official website: used as a dictionary

w3school online tutorial

4. Rookie tutorial: use as a dictionary

Rookie tutorial - learn not only technology, but also dream!

5.Web front end season 1 (HTML): my own note blog

Web front end season 1 (HTML): I: 101 - why learn web front end knowledge+ 102 - what is HTML+ 103 - install tools and learning methods + 04 - create the first web page file_ Smart_zy's blog - CSDN blog directory I Purpose 1 II Reference 1 SiKi College 1 Nodepad + + official website 1 W3school official website III Note 4 Operation: successful 1 What is HTML? 1. Why learn HTML? 1. Who is this course applicable to? 1. Relationship between web front-end engineer and back-end 1 What development tools do you use? 1. Learning methods? 1. Operation: the first web page: I Purpose 1 II Reference 1 SiKi college login - SiKi College - life and learning! I refer to this video practice 1 Nodepad + + official website https:https://blog.csdn.net/qq_40544338/article/details/120907015

6.Web front end season 2 (CSS): my own note blog

Web front end season 2 (CSS): 1: 101 - what is CSS+102 - Download and install HBuilder+103 - what are div and span tags + 104 - the difference between block elements and inline elements + 105 - Basic CSS syntax_ Smart_zy's blog - CSDN blog directory I Purpose 1 Think: Learn front-end knowledge 2 Think: take notes. Next time you don't need to watch the video, you can quickly recall by looking at the notes directly. II Reference 1 GitHub website of my own code 1 Siki College: I refer to this video practice 1 W3school official website: use as a dictionary 1 Rookie tutorial: use three as a dictionary Note 4 Operation: 1: Success: 101 - what is CSS? 1. Success: understand what CSS is IV Action: 2:102 - Download and install HBuilder1 Download: it is found that the official website does not have hbuilder (it is the last version), all of which are HBuilderX1 Create projecthttps://blog.csdn.net/qq_40544338/article/details/120968455

7.Web front end season 3 (JavaScript): my own note blog

Web front end season 3 (JavaScript): I: Chapter 1: basic knowledge of javascript: 101 - what is JavaScript language + 102 - writing the first JavaScript code + 103 - three ways to write JS code_ Smart_zy's blog - CSDN blog directory I Purpose 1 Think: Learn front-end knowledge 2 Think: take notes. Next time you don't need to watch the video, you can quickly recall by looking at the notes directly. II Reference 1 GitHub website of my own code 1 Siki College: I refer to this video practice 1 W3school official website: use as a dictionary 1 Rookie tutorial: use three as a dictionary Note 4 Operation: 1: Success: 101 - what is JavaScript language 1 Introduction to JS IV Operation: 2: Success: 102 - write the first JavaScript code 1 New project: 1 Running result: Success: the warning window 4 will pop up Operation: 3: Success: 103 - write jhttps://blog.csdn.net/qq_40544338/article/details/121351279

III be careful

Operation: 1: Success: 604 - write validation verification rules

1. Operation result: successful

Form verification
1. jQuery plug-in validation: https://jqueryvalidation.org/
a. Internationalization (prompt information supports multiple languages)
b. validation is a plug-in based on jQuery, which has some functions and functions of jQuery
2. Grammar
$(xx).validate({
rules:{},
messages:{}
});
3,rules:{
username:{
required:true,
minlength:9,
digits:true    ,
equalTo:"[name='reusername']"
},
password:{...}
}

4. If there are no messages, an English prompt will be given by default
The international message JS file, you can also not write messages
messages:{
username:{
Required: "user name is required",
minlength: "the minimum length is 9 bits",
digits: "must consist of numbers"
},
password:{...}
}
5. Radio button processing:
<label for="sex" class="error" style="display: none;"></label>

 

<!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: {
					// Rules for the key value of username
					username: {
						required: true,
						minlength: 3,
						maxlength: 6
					},
					email: {
						required: true,
						email: true
					},
					password: {
						required: true,
						minlength: 3,
						maxlength: 6
					},
					rePassword: {
						required: true,
						equalTo: "[name='password']"
					},
					birthday: {
						date: true
					},
					sex:{
						required:true
					}
				}
			};

			$(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">register</td>
				</tr>
				<tr>
					<td align="right" width="100px">user name:</td>
					<td align="left"> <input type="text" name="username" />

					</td>
				</tr>
				<tr>
					<td align="right">Email:</td>
					<td> <input type="text" name="email" /></td>
				</tr>
				<tr>
					<td align="right">password:</td>
					<td> <input type="password" name="password" /> </td>
				</tr>
				<tr>
					<td align="right">Duplicate password:</td>
					<td> <input type="password" name="rePassword" /> </td>
				</tr>
				<tr>
					<td align="right">Date of birth:</td>
					<td> <input type="text" name="birthday" /> </td>
				</tr>
				<tr>
					<td align="right">Gender:</td>
					<td> male <input type="radio" name="sex" /> female <input type="radio" name="sex" />
						<label for="sex" class="error"></label>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center"> <input type="submit" value="register" /> </td>
				</tr>
			</table>
		</form>
	</body>
</html>

Operation: 2: Success: 605 - validation verification completed (end of course)

1. Operation result: successful

 

<!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: {
					// Rules for the key value of username
					username: {
						required: true,
						minlength: 3,
						maxlength: 6
					},
					email: {
						required: true,
						email: true
					},
					password: {
						required: true,
						minlength: 3,
						maxlength: 6
					},
					rePassword: {
						required: true,
						equalTo: "[name='password']"
					},
					birthday: {
						date: true
					},
					sex: {
						required: true
					}
				},

				// Customize the prompt content: the code format is similar to that of rules
				messages: {
					username: {
						required: "User defined prompt: This is required",
						minlength: "Custom prompt: enter at least 3 characters!",
						maxlength: "Custom prompt: enter 6 characters at most!"
					}
				}
			};

			$(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">register</td>
				</tr>
				<tr>
					<td align="right" width="100px">user name:</td>
					<td align="left"> <input type="text" name="username" />

					</td>
				</tr>
				<tr>
					<td align="right">Email:</td>
					<td> <input type="text" name="email" /></td>
				</tr>
				<tr>
					<td align="right">password:</td>
					<td> <input type="password" name="password" /> </td>
				</tr>
				<tr>
					<td align="right">Duplicate password:</td>
					<td> <input type="password" name="rePassword" /> </td>
				</tr>
				<tr>
					<td align="right">Date of birth:</td>
					<td> <input type="text" name="birthday" /> </td>
				</tr>
				<tr>
					<td align="right">Gender:</td>
					<td> male <input type="radio" name="sex" /> female <input type="radio" name="sex" />
						<label for="sex" class="error"></label>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center"> <input type="submit" value="register" /> </td>
				</tr>
			</table>
		</form>
	</body>
</html>

Keywords: Front-end JQuery css

Added by Loriq on Wed, 05 Jan 2022 09:45:55 +0200