WEB前端学习笔记-JavaScript-DOM-表单注册作业以及json

最新推荐文章于 2022-06-07 15:40:10 发布

7i十二

最新推荐文章于 2022-06-07 15:40:10 发布

阅读量185

点赞数

分类专栏：个人学习日记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43150344/article/details/104190439

版权

个人学习日记专栏收录该内容

32 篇文章 1 订阅

订阅专栏

表单注册作业.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>作业</title>
		<style type="text/css">
			span{
				color: red;
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		欢迎注册
		<br>
		<script type="text/javascript" src="../ECMAScript/JQuery.js" ></script>
		<script>
			
			function fun1(){
					var $obj = $(".ca");
					var $text = $obj.text();
			//alert($obj.text());
			if($text==="√√√"){
				alert("注册成功");
			}else{
				alert("请认真核实您的信息");
			}
			
			}
		
			window.onload = function(){
				
			//给用户名文本框绑定blur事件
			var usernameElt = document.getElementById("username");
			usernameElt.onblur = function(){
				//获取用户名
				
				    var usernameErrorSpan = document.getElementById("usernameError");
					var username1 = usernameElt.value;
					
					if(username1.length>5 && username1.length<15){
						var usernameRegExp = /^[A-Za-z0-9]+$/;
						var ok = usernameRegExp.test(username1);
						if(ok){
							usernameErrorSpan.innerText = "√";
						}else{
							usernameErrorSpan.innerText = "用户名输入不合法！"
						}
					}else{
					usernameErrorSpan.innerText= "用户名的长度必须介于6到14之间！"
				    }
					
					
				    
				}
			// var usernameRegExp = /^[A-Za-z0-9]{6,14}$/
			
			//邮箱
			var emailElt = document.getElementById("email");
			emailElt.onblur = function(){
				
				var emailErrorSpan = document.getElementById("emailError");
				var email1 = emailElt.value;
				var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				var ok = emailRegExp.test(email1);
				if(ok){
					emailErrorSpan.innerText = "√"
				}else{
					emailErrorSpan.innerText = "您的邮箱地址输入有误，请检查并重新输入！"
				}
			}
			//密码
			
			
			var passwordElt= document.getElementById("password");
			var passwordElt2 = document.getElementById("password2");
			passwordElt2.onblur = function(){
				
				var passwordErrorSpan = document.getElementById("passwordError");
				var passwordT1 = passwordElt.value;
				var passwordT2 = passwordElt2.value;
				if(passwordT1 === passwordT2 && passwordT2 != ""){
					passwordErrorSpan.innerText = "√";
				}else{
					passwordErrorSpan.innerText = "两次密码输入不一致，请确认并再次输入您的密码！";
				}
				}
			
			
			
			
			}
			
			
		</script>
		<form action = "http://localhost:3306/jd/save" method="get">
		用户名<input type="text" name="username" id="username" /><span id="usernameError" class="ca"></span>
		<br>
		密码<input type="password" name="password" id="password" />
		<br>
		确认密码<input type="password" id="password2" name="password" ><span id="passwordError"class="ca"></span>
		<br>
		邮箱地址<input type="text" name="email" id="email" /><span id="emailError"class="ca"></span>
		<br>
		<input type="button" value="注册" id="submit" onclick="fun1()"/>
		<br>
		<input type="reset" value="重置" />
		</form>
		
	</body>
</html>

JSON-001.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*
			 1、什么是JSON？有什么用？
			   JavaScript Object Notation(JavaScript对象标记)简称JSON(数据交换格式)
			   	JSON主要的作用是：一种标准的数据交换格式。(目前非常流行，90%以上的系统，系统A
			   	和系统B交换数据的话都是采用JSON)
			 2、JSON是一种标准的轻量级的数据交换格式，特点是:
			          体积小，易解析
			 3、正在实际的开发中有两种数据交换格式，使用最多，其一是JSON 另一是XML
			    XML体积较大，解析麻烦，但是有其优点是语法严谨(通常银行相关的系统之间进行数据交换的话会使用XML)；
			    
			 4、JSON的语法格式:
			        var jsonObj = {
			        	"属性名":属性值,
			        	"属性名":属性值,
			        	"属性名":属性值,
			        	"属性名":属性值,
			        	...
			        }
			 */
			//创建JSON对象 (JSON也可以称为无类型对象。轻量级，轻巧，体积小，易解析)
			var studentObj = {
				"sno" : "110",
				"sname" : "张三",
				"sex" : "男"
			};
			
			//访问JSON对象的属性
			alert(studentObj.sno+","+studentObj.sex+","+studentObj.sname);
			
			//之前没有使用JSON的时候，定义类，创建对象，访问对象的属性
			Student = function(sno,sname,sex){
				this.sno = sno;
				this.sname = sname;
				this.sex = sex;
			}
			var stu = new Student("111","李四","男");
			alert(stu.sname+","+stu.sno+","+stu.sex);
			
			//JSON数组
			var students = [
			{"sno":"110","sname":"张三","sex":"男"},
			{"sno":"120","sname":"王三","sex":"男"},
			{"sno":"130","sname":"李三","sex":"男"}
			];
			
			//遍历
			for(var i = 0; i< students.length;i++){
				var stuObj = students[i];
				alert(stuObj.sno+"."+stuObj.sname+","+stuObj.sex);
			}
		</script>
	</body>
</html>

JSON-002.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>复杂一些的JSON对象</title>
	</head>
	<body>
		<script type="text/javascript">
			var user = {
				"usercode" : 100,
				"username" : "张三",
				"sex" : true,
				"address" : {
					"city" : "北京",
					"street" : "大兴区",
					"zipcode" : "5468452"
				},
				"aihao" : ["smoke","drink","tt"]
			};
			//访问人名以及居住的城市
			alert(user.address.city);
			
			//请自行设计JSON格式的数据，这个JSON格式的数据可以描述整个班级中每一个学生的信息，以及总人数信息.
			var jsonData = {
				"total" : 3,
				"students" : [
				{"name":"zhangsan","birth":"1999-07-12"},
				{"name":"lisi","birth":"1992-07-12"},
				{"name":"wangwu","birth":"1999-03-12"}
				]
			};
		</script>
	</body>
</html>

JSON-003-eval函数.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>eval函数</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
			 eval函数的作用是:
			                  把字符串当做一段JS代码解释并执行
			 */
			/*
			 window.eval("var i = 100;");
			 alert("i="+i);//i = 100
			 */
			
			//java连接数据库，查询数据之后，将数据在java程序中拼接成json格式的字符串，将json格式的字符串响应到浏览器
			//也就是说java响应到浏览器上的仅仅是一个"JSON格式的字符串"还不是一个json对象
			//可以使用eval函数，将json格式的字符串转换成json对象
			var fromjava = "{\"name\":\"zhangsan\",\"password\":\"123\"}";
			//这是java程序给发过来的json格式的"字符串"
			//将以上的json格式的字符串转换成json对象
			window.eval("var jsonObj = "+ fromjava);
			//访问json对象
			alert(jsonObj.name+","+jsonObj.password);//在前端取数据
			
			/*
			 面试题
			      在js当中[] 和 {} 有什么区别？
			      []是数组
			      {}是json
			      
			      java中的数组: int[] arr = {1,2,3,4};
			      js中的数组： var arr = [1,2,3,4,5];
			      json : var jsonObj = {"email":"zhangsan@123.com","age":24};
			 */
			
			var json = {
				"username" : "zhangsan"
			}
			//js中访问json对象的属性
			alert(json.username);
			alert(json["username"]);
		</script>
	</body>
</html>

JSON-004-设置table的tbody.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>设置table的tbody</title>
	</head>
	<body>
		<script type=" text/javascript">
			//有这些json数据
			var data = {
				"total" : 4,
				"emps" : [
				{"empno":7629,"ename":"SMITH","sal":800.0},
				{"empno":7622,"ename":"SMITH","sal":800.0},
				{"empno":7632,"ename":"SMITH","sal":800.0},
				{"empno":7239,"ename":"SMITH","sal":800.0}
				]
			};
			//希望把数据展示到table当中
			window.onload = function(){
				var displayBtnElt = document.getElementById("displayBtn");
				displayBtnElt.onclick = function(){
					var emps = data.emps;
					var html = "";
					for(var i = 0;i<emps.length;i++){
						var emp = emps[i];
						html += "<tr>";
						html += "<td>"+emp.empno+"</td>";
						html += "<td>"+emp.ename+"</td>";
						html += "<td>"+emp.sal+"</td>";
						html += "</tr>";
					}
					document.getElementById("emptbody").innerHTML = html;
					document.getElementById("count").innerHTML = data.total;
					
				}
			}
		</script>
		<input type="button" value="显示员工信息列表" id="displayBtn" />
		<h2>员工信息列表</h2>
		<hr>
		<table border="1px" width="50%">
			<tr>
				<th>员工编号</th>
				<th>员工姓名</th>
				<th>员工薪资</th>
			</tr>
			<tbody id="emptbody">
				
			</tbody>
		</table>
		总共<span id="count">0</span>条数
	</body>
</html>

7i十二

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB前端学习笔记-JavaScript-DOM-表单注册作业以及json

表单注册作业.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>作业</title> <style type="text/css"> span{ color: red; font-size: 12px...
复制链接

扫一扫