JavaWeb_day6_Jquery02

最新推荐文章于 2024-04-23 15:19:32 发布

零零猪

最新推荐文章于 2024-04-23 15:19:32 发布

阅读量132

点赞数

文章标签： validation插件的使用表单注册校验

本文链接：https://blog.csdn.net/weixin_42062397/article/details/82854448

版权

1.使用对象访问的方式进行遍历：

语法：$().each(function(){})

2.使用jquery实现二级联动

<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				//2.创建二维数组用来存储城市
				var cities = new Array(5);
				cities[0] = new Array("合肥", "芜湖", "蚌埠", "淮南")
				cities[1] = new Array("朝阳区", "海淀区", "通州区", "房山区")
				cities[2] = new Array("松江区", "宝山区", "金山区", "嘉定区")
				cities[3] = new Array("武汉市", "宜昌市", "襄樊市", " 荆州市")
				cities[4] = new Array("苏州市", "徐州市", "盐城市", "无锡市")
				$("#province").change(function(){
					//10.清除第二个下拉列表中的内容
					$("#city").empty();
					//1.获取用户选择的省份
					var prov=this.value;
					//alert(prov);
					//3.遍历二维数组中的省份
					$.each(cities,function(i,n){
						//alert(i+"-"+n);
						//4.判断用户选择的省份下的所有城市
						if(i==prov){
							//5.遍历该省份下的所有城市
							$.each(cities[i],function(j,m){
								//6.创建城市节点文本
								var textNode=document.createTextNode(m);
								//7.创建option节点
								var optionNode=document.createElement("option");
								//8.将城市文本节点添加到option节点中去
								$(optionNode).append(textNode)
								//9.将option节点加到第二个select下拉列表中去
								$(optionNode).appendTo($("#city"))
								
							});
						}
					});
					
				});
			});
		</script>

3.使用jQuery的插件Validation实现表单校验

CSS部分代码

#father{
	
	width: 1240px;
	height: 900px;
	margin: auto;
}
#head{
	
	width: 100%;
	height: 50px;
}
.head1{
	
	width: 410px;
	height: 100%;
	float: left;
}
#head1{
	width: 210px;
}
.head11{
	color: #000000;
}
#head2{
	background: url(../img/header.png);
	width: 510px;
}
#nav{
	
	width: 89%;
	height: 50px;
	background-color: #000000;
	
}

.nav1{
	color: white;
}
#rigst{
	
	width: 100%;
	height: 600px;
	background-image: url(../img/regist_bg.jpg);height: 85%;
}
#help{
	
	width: 100%;
	height: 100px;
	background-image: url(../img/footer.jpg);width: 100%;
}

#copyright{
	
	width: 100%;
	height: 100px;	
}
a{
	text-decoration: none;
}
a font{
	color: blue;
}

label.error{
				background:url(../img/unchecked.gif) no-repeat 10px 3px;
				padding-left: 30px;
				font-family:georgia;
				font-size: 15px;
				font-style: normal;
				color: red;
			}
			
label.success{
				background:url(../img/checked.gif) no-repeat 10px 3px;
				padding-left: 30px;
			}

HTML部分代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>注册页面</title>
		<link rel="stylesheet" href="css/rigst.css" />
		<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
		<!--引入validation插件-->
		<script type="text/javascript" src="js/jquery.validate.min.js"></script>
		<!--引入国际化文件-->
		<script type="text/javascript" src="js/messages_zh.js"></script>
		<script>
			$(function() {
				$("#register").validate({
					rules: {
						username: {
							required: true,
							minlength: 3
						},
						password: {
							required: true,
							digits: true,
							minlength: 6
						},
						repassword: {
							required: true,
							equalTo: "[name='password']"
						},
						email: {
							required: true,
							email: true
						},
						name: {
							required: true,
							minlength: 2
						},
						sex: {
							required: true
						}

					},
					messages: {
						username: {
							required: "用户名不能为空！",
							minlength: "用户名不得少于3位！"
						},
						password: {
							required: "密码不能为空！",
							digits: "密码只能为数字！",
							minlength: "密码不得少于6位！"
						},
						repassword: {
							required: "确认密码不能为空",
							equalTo: "两次输入密码不一致"
						},
						email: {
							required: "邮箱必须填写！",
							email: "邮箱格式不正确！"
						},
						name: {
							required: "姓名必须填写",
							minlength: "姓名不得少于两位数"
						},
						sex: {
							required: "性别必须勾选"
						}
					},
					errorElement: "label", //用来创建错误提示信息标签
					success: function(label) { //验证成功后的执行的回调函数
						//label指向上面那个错误提示信息标签label
						label.text(" ") //清空错误提示消息
							.addClass("success"); //加上自定义的success类
					}
				});
			});
		</script>

	</head>

	<body>
		<div id="father">
			<!--头部部分-->
			<div id="head">
				<div class="head1" id="head1"><img src="img/云顶logo.png" width="140px" height="120px" /> </div>
				<div class="head1" id="head2"></div>
				<div class="head1" style="float: right;margin-top: 15px;">
					<a href="#">
						<font size="4" class="head11">登录</font>
					</a>&nbsp;
					<a href="#">
						<font size="4" class="head11">注册</font>
					</a>&nbsp;
					<a href="#">
						<font size="4" class="head11">购物车</font>
					</a>
				</div>
			</div>
			<!--导航部分-->
			<div id="nav" style="margin-left: 140px;">
				<a href="#">
					<font size="6" class="nav1">首页</font>
				</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="#">
					<font size="4" class="nav1">品牌手机</font>
				</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="#">
					<font size="4" class="nav1">品牌电脑</font>
				</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="#">
					<font size="4" class="nav1">电脑配件</font>
				</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="#">
					<font size="4" class="nav1">手机配件</font>
				</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="#">
					<font size="4" class="nav1">宽带办理</font>
				</a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="#">
					<font size="4" class="nav1">套餐开卡</font>
				</a>
			</div>
			<br />
			<!--登录页面-->
			<div id="rigst">
				<br />
				<br />
				<br/>
				<br/>
				<form action="#" method="get" id="register">
					<table align="center" width="800px" height="500px" cellpadding="0px" cellspacing="0px" bgcolor="white">

						<tr>
							<td colspan="2">
								<font size="4" color="darkblue">会员注册</font>&nbsp;&nbsp;&nbsp;USER REGISTER</td>

						</tr>
						<tr>
							<td align="center"><b>用户名</b></td>
							<td><em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="username" id="username" style="line-height: 30px;" placeholder="请输入用户名" size="50px" /></td>
						</tr>
						<tr>
							<td align="center"><b>密码</b></td>
							<td><em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="password" name="password" id="password" style="line-height: 30px;" placeholder="请输入密码" size="50px" /></td>
						</tr>
						<tr>
							<td align="center"><b>确认密码</b></td>
							<td><em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="password" name="repassword" id="repassword" style="line-height: 30px;" placeholder="请输入确认密码" size="50px" /></td>
						</tr>
						<tr>
							<td align="center"><b>Email</b></td>
							<td><em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="email" name="email" id="email" style="line-height: 30px;" placeholder="Email" size="50px" /></td>
						</tr>
						<tr>
							<td align="center"><b>姓名</b></td>
							<td><em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="name" id="name" style="line-height: 30px;" placeholder="请输入姓名" size="50px" /></td>
						</tr>

						<tr>
							<td align="center"><b>性别</b></td>
							<td>
									<span>
											<em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="男"/>男
											<input type="radio" name="sex" value="女"/>女<em></em>
											<label for="sex" class="error" style="display: none;"></label>
									</span>
							</td>

						</tr>
						<tr>
							<td align="center"><b>出生日期</b></td>
							<td><em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="date" name="birthday" style="line-height: 30px; " placeholder="年\月\日" /> </td>
						</tr>
						<tr>
							<td align="center"><b>验证码</b></td>
							<td><em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="yzm" id="yanzhengma" style="line-height: 30px;" size="20px" id="yanzhengma" />&nbsp;&nbsp;<img src="img/yanzhengma.png" width="60px" height="30px" /></td>
						</tr>
						<tr>
							<td></td>
							<td>
								<input type="submit" value="注册" style="background: url(img/register.gif);width: 90px; height: 40px;color: white;" />
							</td>
						</tr>

					</table>
				</form>
			</div>
		</div>
		<br />
		<br />

		<!--帮助中心-->
		<div id="help">

		</div>
		<br />
		<!--版权所有-->
		<div id="copyright" align="center">
			<a href="#">
				<font size="4">关于我们</font>
			</a>&nbsp;
			<a href="#">
				<font size="4">联系我们</font>
			</a>&nbsp;
			<a href="#">
				<font size="4">招贤纳士</font>
			</a>&nbsp;
			<a href="#">
				<font size="4">法律声明</font>
			</a>&nbsp;
			<a href="#">
				<font size="4">友情链接</font>
			</a>&nbsp;
			<a href="#">
				<font size="4">支付方式</font>
			</a>&nbsp;
			<a href="#">
				<font size="4">配送方式</font>
			</a>&nbsp;
			<a href="#">
				<font size="4">服务声明</font>
			</a>&nbsp;
			<a href="#">
				<font size="4">广告声明</font>
			</a>
			<br/>
			<br/>
			<font size="4">Copyright © 2018-2028 云顶商城 版权所有</font>
		</div>

		</div>
		<script src="js/页面校验.js"></script>
	</body>

</html>