表单验证二级联动添加删除

最新推荐文章于 2022-04-06 21:45:53 发布

原创最新推荐文章于 2022-04-06 21:45:53 发布 · 486 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用jQuery实现的简单表单验证及动态填充省市级联下拉菜单的示例。主要内容包括：页面加载时填充省份选项、根据所选省份动态更新城市选项、表单提交时对用户名进行验证并提示、以及提交后将数据添加到表格中并提供删除功能。

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>模拟</title>
	<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	<form action="#" id="f">
	用户名:<input type="text" id="username" />
	<span id="nametip">

	</span>
	<br>
	性别:<input type="radio" name="sex" value="男"/>男
	<input type="radio" name="sex" value="女"/>女<br>
	地址:
	<select id="sheng">
	<option>--省--</option>
	</select>
	<select id="shi">
	<option>--市--</option>
	</select>
	<br>
	<input type="submit" value="注册"/>
	</form>
	<table border="1px" cellspacing="0px" cellpadding="0px" id="t">
	<tr>
	<td>用户名</td>
	<td>性别</td>
	<td>地址</td>
	<td>操作</td>
	</tr>
	</table>
	<!--
	逻辑代码
	1.界面
	2.获取名字，验证是否为空
	3.获取性别
	4.获取地址
	5.添加到页面
	6.实现删除功能
	-->
	<script type="text/javascript">
	//页面加载的时候，就要将省的信息，和市的信息添加到页面
	var arr = new Array();
	arr["山东"]=new Array("青岛","济南","聊城");
	arr["山西"]=new Array("运城","太原","临汾");
	//先将省放入第一个下拉菜单
	for(sheng in arr){
	$("#sheng").append("<option>"+sheng+"</option>");
	}
	//-----------------------------------市----
	//当省的下拉改变的时候，市做相应的显示
	$("#sheng").change(function(){
	//每次清空一下，防止重复
	$("#shi").empty();
	$("#shi").append("<option>--市--</option>");
	//根据省取出市，放入第二个下拉菜单
	var s1 = $("#sheng").val();
	var shis = arr[s1];//shis是个数组
	for(shi in shis){
	var s2 = shis[shi];
	$("#shi").append("<option>"+s2+"</option>");
	}
	});
	//表单验证
	$("#f").submit(function(){
	//获取名字，验证是否为空
	var username = $("#username").val();
	if (username=="") {
	//提示
	$("#nametip").html("用户名不能为空");
	//变色
	$("#nametip").css({"color":"red"});
	return;//结束方法
	}else{
	$("#nametip").html("");
	}
	// 获取性别
	var sex = $("input[type=radio]:checked").val();
	// var sex = $("input:radio:checked").val();
	// console.log(sex);
	//取出地址
	var address = $("#sheng").val()+"-"+$("#shi").val();
	//添加到表格
	var tr = "<tr><td>"+username+"</td><td>"+sex+"</td><td>"+address+"</td><td><input type = 'button' value = '删除' onclick = 'dele(this)'/></td></tr>";
	$("#t").append(tr);
	//不想跳转，返回false
	return false;
	});
	//删除的方法
	function dele(t){
	t.parentNode.parentNode.remove();
	}
	</script>
	</body>
	</html>