<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<link rel="stylesheet" href="../css/main.css" />
<link rel="stylesheet" href="../css/style2.css" />
<style>
div{
border:1px solid blue;
}
.bodyDiv{
width:90%;
}
.bodyDiv > div{
width:100%;
}
.logoDiv{
width:33%;
height:50px;
float:left;
}
.clear{
clear:both;
}
ul li{
display:inline;
}
a:link{
color:blue;
}
a:visited{
color:#FFFF00;
}
a:hover{
color:green;
font-size: 20px;
}
a:active{
color:red;
font-size:30px;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
<script>
$(function(){
// 定义二维数组方式1：
// var arrs = new Array(5);
// arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市");
// arrs[1] = new Array("南京市","苏州市","扬州市","无锡市");
// arrs[2] = new Array("武汉市","襄阳市","荆州市","宜昌市","恩施");
// arrs[3] = new Array("石家庄市","唐山市","保定市","邢台市","廊坊市");
// arrs[4] = new Array("长春市","吉林市","四平市","延边市");
// 定义二维数组方式2：
var cities = [
["杭州市","绍兴市","温州市","义乌市","嘉兴市"],
["南京市","苏州市","扬州市","无锡市"],
["武汉市","襄阳市","荆州市","宜昌市","恩施"],
["石家庄市","唐山市","保定市","邢台市","廊坊市"],
["长春市","吉林市","四平市","延边市"]
];
var $city = $("#city");
// 获得代表省份的下拉列表:
$("#province").change(function(){
// alert(this.value);
// alert($(this).val());
$city.get(0).options.length = 1;
var val = this.value;
// 遍历并且判断:
// $.each(cities,function(i,n){
// 判断:
// if(i == val){
// $(n).each(function(j,m){
// // alert(j+" "+m);
// $city.append("<option>"+m+"</option>");
// });
// }
// });
$(cities[val]).each(function(i,n){
$city.append("<option>"+n+"</option>");
});
});
});
</script>
<script>
// 表单校验的操作
$(function(){
// 步骤一：为必填项添加一个 *
$("form input.required").parent().append("<b class='high'>*</b>");
// 遍历的方法 为必填项添加一个 *
// $("form input.required").each(function(){
// // 获得他的父元素：
// $(this).parent().append("<b class='high'> *</b>");
// });
// 步骤二：获得所有的输入项,为输入项添加一个blur事件
$("form input").blur(function(){
// 获得该元素的父元素
var $parent = $(this).parent();
// 将原有的信息清除掉
$parent.find(".formtips").remove();
// 确定点击的输入项是谁？
if($(this).is("#username")){
// 判断用户名是否为空
if(this.value == ""){
// 向文本框后添加一个错误提示
$parent.append("<span class='formtips onError'>用户名不能为空</span>");
}else{
// 向文本框添加一个正确提示
$parent.append("<span class='formtips onSuccess'>用户名格式正确</span>");
}
}
if($(this).is("#password")){
// 判断密码是否为空
if(this.value == ""){
// 向文本框后添加错误提示
$parent.append("<span class='formtips onError'>密码不能为空</span>");
}else{
// 向文本框后添加正确提示
$parent.append("<span class='formtips onSuccess'>密码格式正确</span>")
}
}
if($(this).is("#repassword")){
// 判断密码是否为空
if(this.value == ""){
// 向文本框后添加错误提示
$parent.append("<span class='formtips onError'>确认密码不能为空</span>");
}else{
// 判断两次密码是否相同
if(this.value == $("#password").get(0).value){
// 向文本框后添加正确提示
$parent.append("<span class='formtips onSuccess'>两次输入密码匹配</span>");
}else{
// 向文本框后添加错误提示
$parent.append("<span class='formtips onError'>两次输入密码不匹配</span>");
}
}
}
}).focus(function(){
$(this).triggerHandler("blur");
}).keyup(function(){
$(this).triggerHandler("blur");
});
// 为表单添加一个submit事件
$("form").submit(function(){
// 执行表单中blur事件
$("form :input").trigger("blur");
// 获得错误信息的长度
var onErrorLength = (".onError").length;
if(onErrorLength > 0){
return false;
}
});
});
</script>
</head>
<body>
<!--整体DIV-->
<div class="bodyDiv">
<div>
<div class="logoDiv">
<img src="../img/logo2.png" height="50"/>
</div>
<div class="logoDiv">
<img src="../img/header.png" height="50"/>
</div>
<div class="logoDiv" style="margin-top:0px;padding-top:10px;height:40px;">
<a href="#">登录</a>
<a href="#" id="reg">注册</a>
<a href="#">购物车</a>
</div>
<div class="clear"></div>
</div>
<div style="height:50px;background-color: black;color:white;font-size: 20px;">
<ul >
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
</div>
<div style="height:500px;background-image: url(../img/regist_bg.jpg);">
<div style="border:5px solid gray;background-color:white;position:absolute;left:350px;top:160px;width:600px;">
<form action="http://www.163.com" method="post" >
<table border="0" width="100%" cellspacing="15">
<tr>
<td>用户名</td>
<td ><input type="text" id="username" name="username" class="required"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="password" name="password" class="required"></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" id="repassword" name="repassword" class="required"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select id="province" name="province" >
<option value="">-请选择-</option>
<option value="0">浙江省</option>
<option value="1">江苏省</option>
<option value="2">湖北省</option>
<option value="3">河北省</option>
<option value="4">吉林省</option>
</select>
<select id="city" name="city">
<option>-请选择-</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="排球" />排球
<input type="checkbox" name="hobby" value="羽毛球" />羽毛球
</td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" id="email" name="email"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<div>
<img src="../img/footer.jpg" width="100%"/>
</div>
<div>
<center>
关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明 <br/>
Copyright © 2005-2018 卤蛋商城 版权所有
</center>
</div>
</div>
</body>
</html>
使用JQ完成表单校验
猜你喜欢
转载自blog.csdn.net/ludadan/article/details/80118205
今日推荐
周排行