jquery 简单注册表单及城市关联选择

最新推荐文章于 2024-04-19 10:18:52 发布

cdcdhj

最新推荐文章于 2024-04-19 10:18:52 发布

阅读量282

点赞数

分类专栏： jquery 文章标签： jquery 前端

本文链接：https://blog.csdn.net/cdcdhj/article/details/121163781

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script language="javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
		<script>
		$(function(){
			$("input[name='validate']").click(function(){
				$("#msg").html("");
				//获取各个输入框的值
				var userName=$("input[name='userName']").val();
				var email=$("input[name='email']").val();
				var pass1=$("input[name='password']").val();
				var pass2=$("input[name='chkPassword']").val();
				//不允许出现空值
				var hasValue=userName&&email&&pass1&&pass2;
				if(!hasValue){
					$("#msg")
						.append("输入框不能为空")
						.css("color","red");
						return false;
				}
				if(userName.trim()===''){
					$("#msg").append("不能是空字符或空格").css("color","red");
				}else if(userName.length<=4 || userName.length>=22){
					$("#msg").append("用户名在5-11字符内").css("color","red");
				}
				//检查两次输入密码是否完全相同
				var passwordMatch=false;
				if(pass1===pass2){
					passwordMatch=true;
				}
				if(!passwordMatch){
					$("#msg").append("两次密码不一致").css("color","red");
					return false;
				}
				if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*/.test(email)){
					$("#msg").append("邮箱输入错误").css("color","red");
				}
				
			});
			$("input[name='addLocation']").click(function(){
				
				$("body").append("<select name='stateCombo'><option>"+"选择省份</option></select>");
				//禁用addLocation按钮，避免重复点击
				$(this).attr("disabled","disabled");
				//添加几个省名作为例子
				var states=["湖北省","四川省","湖南省"];
				$.each(states,function(index,value){
					$("[name='stateCombo']").append("<option value='"
						+ index
						+ "'>"
						+ value
						+"</option>"
					);
				});
				//添加一个空的<select>元素，用于城市
				$("body").append("<select name='cityCombo'>"+"<option>选择城市</option></select>");
				//使用on()方法，因为省下拉列表在页面加载时还不存在
				$("[name='stateCombo']").change(function(e){
					//获取选中省份名字，并定义城市名称数组
					var selectedState=$(this).val();
					var HB_City=["武汉","荆州","宜昌"];
					var SC_City=["成都","宜宾","广元"];
					var HN_City=["长沙","湘潭","韶关"];
					var city=[];
					if(selectedState==0){
						city=$.extend([],HB_City);
					}else if(selectedState==1){
						city=$.extend([],SC_City);
					}else if(selectedState==2){
						city=$.extend([],HN_City);
					}else{
						city=['选择城市'];
					}
					//清除cityCombo中任何之前的值
					$("[name='cityCombo']").empty();
					$.each(city,function(index,value){
						$("[name='cityCombo']").append("<option value='"
						+index
						+"'>"
						+value
						+"</option>"
						);
					});
				});
			});
			
			
			
		});
		
		</script>
		<style type="text/css">
	
		</style>
	</head>
	<body>
		<div id="msg"></div>
		<form name="userRegistrationForm">
			<lable for="userName">用户名：</lable><input type="text" name="userName"><br/>
			<lable for="email">邮&emsp;箱：</lable><input type="text" name="email"/><br/>
			<lable for="password">密&emsp;码：</lable><input type="password" name="password"/><br/>
			<lable for="chkPassword">重复密码：</lable><input type="password" name="chkPassword"/><br/>
			<input type="button" name="validate" value="提交"/>
		</form>
		<input type="button" name="addLocation" value="选择城市"/>
	</body>
</html>

cdcdhj

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery 简单注册表单及城市关联选择

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script language="javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script> $(function(){ $("inpu
复制链接

扫一扫