IT技术之家

首页 > 前端

前端

Web前端第四季(jQuery):七:604-书写validation校验规则+605-完成validation校验（课程结束）_Smart_zy

发布时间：2023-11-28 20:25:01 前端 33次 标签：前端 jquery css
目录一.目的1.想：学习前端知识2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。二.参考1.我自己代码的GitHub网址2.SIKI学院:我参考此视频实操3.w3school官网:当做字典使用4.菜鸟教程：当做字典使用5.Web前端第一季(HTML):我自己写的笔记博客6.Web前端第二季(CSS):我自己写的笔记博客7.Web前端第三季(JavaScript):我自己写的笔记博客三.注意操作:1:成功:604-书写validation校验.....

目录

一.目的

1.想：学习前端知识

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

二.参考

1.我自己代码的GitHub网址

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

3.w3school官网:当做字典使用

4.菜鸟教程：当做字典使用

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

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

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

三.注意

操作:1:成功:604-书写validation校验规则

1.运行结果：成功

操作:2:成功:605-完成validation校验（课程结束）

1.运行结果：成功

一.目的

1.想：学习前端知识

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

二.参考

1.我自己代码的GitHub网址

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

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

登录 - SiKi学院 - 生命不息，学习不止！

    我参考此视频实操

3.w3school官网:当做字典使用

w3school 在线教程

4.菜鸟教程：当做字典使用

菜鸟教程 - 学的不仅是技术，更是梦想！

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

Web前端第一季(HTML):一:101-为什么学习Web前端知识？+102-什么是HTML？+103-安装工具和学习方法+04-创建第一个网页文件_Smart_zy的博客-CSDN博客目录一.目的1.二.参考1.SIKI学院1.Nodepad++官网1.w3school官网三.注意四.操作:成功1.HTML是什么？1.为什么学习HTML？1.本课程的适用对象?1.web前端工程师和后端的关系1.使用什么开发工具？1.学习方法？1.操作 :第一个网页：一.目的1.二.参考1.SIKI学院登录 - SiKi学院 - 生命不息，学习不止！我参考此视频实操1.Nodepad++官网https:https://blog.csdn.net/qq_40544338/article/details/120907015

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

Web前端第二季(CSS):一:101-什么是CSS+102-下载安装HBuilder+103-什么是div和span标签+104-块元素和行内元素的区别+105-CSS基本语法_Smart_zy的博客-CSDN博客目录一.目的1.想：学习前端知识2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。二.参考1.我自己代码的GitHub网址1.SIKI学院:我参考此视频实操1.w3school官网:当做字典使用1.菜鸟教程：当做字典使用三.注意四.操作:1:成功:101-什么是CSS？1.成功：了解了什么是CSS四.操作:2:102-下载安装HBuilder1.下载：发现官网没有了HBuilder(已经是上一个版本了)，全部是HBuilderX1.创建项目.https://blog.csdn.net/qq_40544338/article/details/120968455

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

Web前端第三季(JavaScript):一:第1章:JavaScript基本知识:101-什么是JavaScript语言+102-书写第一个JavaScript代码+103-书写js代码的三种方式_Smart_zy的博客-CSDN博客目录一.目的1.想：学习前端知识2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。二.参考1.我自己代码的GitHub网址1.SIKI学院:我参考此视频实操1.w3school官网:当做字典使用1.菜鸟教程：当做字典使用三.注意四.操作:1:成功:101-什么是JavaScript语言1.介绍JS四.操作:2:成功:102-书写第一个JavaScript代码1.新建项目：1.运行结果：成功：跳出警告窗口四.操作:3:成功:103-书写j.https://blog.csdn.net/qq_40544338/article/details/121351279

三.注意

操作:1:成功:604-书写validation校验规则

1.运行结果：成功

表单校验
1，jQuery插件validation：https://jqueryvalidation.org/
a、国际化（提示信息支持多国语言）
b、validation是一个基于jQuery的插件，里面有了jQuery的一些函数和功能
2，语法
$(xx).validate({
rules:{},
messages:{}
});
3，rules:{
username:{
required:true,
minlength:9,
digits:true?? ?,
equalTo:"[name='reusername']"
},
password:{...}
}

4，?? ?如果没有messages的话，会默认给出英文提示
引入了国际化的message.js文件的话，也可以不写messages
messages:{
username:{
required:"用户名必须填写",
minlength:"最小长度为9位",
digits:"必须由数字组成"
},
password:{...}
}
5，单选按钮处理：
<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: {
					// 对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">注册</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>

操作:2:成功:605-完成validation校验（课程结束）

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的键值进行规则
					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
					}
				},

				// 自定义提示信息内容：代码格式和rules是差不多的
				messages: {
					username: {
						required: "自定义提示：这个是必须填写的",
						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>

相关文章