jQuery判断用户名并实现省市的二级联动

来源：互联网发布：云计算教学视频百度云编辑：程序博客网时间：2024/05/29 15:24

以下均为必填项

要求：技术要求（html + css + jQuery）

1、完成页面布局（页面布局合理、样式与图片一致、代码无误）。

2、用 jQuery 验证各项，要求用户名必填，如果没有填写，在输入框后提示。

3、性别项必选，如没有选择，弹框提醒。

4、地址项必选，如没有选择，弹框提醒。并且实现省市的二级联动。

5、当用户点击注册时，将用户名所填信息加入到表格中。并且实现删除功能。

源码：

<!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><h2>注册页面</h2><form action="#" id="ff">用户名:<input type="text" id="username" /><span style="color: red;" id="tishi"></span><br><br>性别:<input type="radio" name="sex" value="男" />男<input type="radio" name="sex" value="女" />女<br><br>地址:<select id="sheng"><option>---省---</option></select><select id="shi"><option>---市---</option></select><br><br><input type="submit" value="注册" /></form><br><table border="1px" cellspacing="0px" cellpadding="0" id="ta"><tr><td>用户名</td><td>性别</td><td>地址</td><td>操作</td></tr></table><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>");        }        });//表单验证$("#ff").submit(function(){//获取名字,验证是否没空var username = $("#username").val();if (username=="") {$("#tishi").html("用户名不能为空");return;}else{$("#tishi").html("");}//获取性别var sex = $("input[type=radio]:checked").val();if (sex==null) {alert("请选择性别");}else{var address = $("#sheng").val()+"---"+$("#shi").val();if (address=="---省---" + "---" + "---市---") {alert("请选择地址");return false;}else{//添加到表格var tr = "<tr><td>"+username+"</td><td>"+sex+"</td><td>"+address+"</td><td><input type = 'button' value = '删除' onclick = 'dele(this)'/></td></tr>";        $("#ta").append(tr);}}return false;});//删除的方法        function dele(ta){        ta.parentNode.parentNode.remove();        }</script></body></html>

阅读全文

0 0