对象、事件、表单

最新推荐文章于 2024-09-14 18:52:56 发布

weixin_73667562

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量178

点赞数

文章标签： servlet javascript

本文链接：https://blog.csdn.net/weixin_73667562/article/details/127050045

版权

对象

History对象：有关客户访问过的URL的信息。

名称	说明
back()	加载history列表中的上一个URL
forward()	加载history列表中的下一个URL
go("url"ornumber)	加载history列表中的一个URL或要求浏览器移动指定的页面数

back()方法相当于后退按钮；forward()方法相当于前进按钮；

go(1)代表前进1页，等价于forward()方法；go(-1)代表后退1页，等价于back()方法；

案例

Location对象：有关当前URL的信息

属性	说明
host	设置或检索位置或URL的主机号和端口名
hostname	设置或检索位置或URL的主机名部分
href	设置或检索完整的URL字符串

方法	说明
assign("url")	加载URL指定的新的HTML文档
reload()	重新加载当前页面
replace("url")	通过加载URL指定的文档来替换当前文档

案例

事件

事件：响应用户操作、完成交互，如OnClick 、OnkeyDown

一般可以分为鼠标事件、键盘事件及其他事件

鼠标事件	意义
onmousedown	按下鼠标键
onmousemove	移动鼠标
onmouseout	鼠标离开某一个网页对象
onmouseover	鼠标移动到某一个网页对象上
onmouseup	松开鼠标键
onclick	单击鼠标键
ondblclick	双击鼠标键

键盘事件	意义
onkeydown	按下一个键
onkeyup	松开一个键
onkeypress	按下然后松开一个键

事件注册的方式：1、将事件绑定到元素属性 2、将事件绑定到对象属性

Window对象常用事件

事件	说明
onload()	对象装载完成后触发
onscroll()	窗口的滚动条被拖动时触发
onresize()	窗口的大小改变时触发
onblur0/onfocus()	窗口失去/获得焦点时触发
onerror()	遇到执行错误时触发
onunload()	对象被卸载后触发

表单

属性	action	表单数据将提交的页面
属性	method	提交表单的方法，get/post
方法	submit()	提交表单
事件	onsubmit	提交表单触发，返回false时取消提交

post的数据不会在URL中显示，而get则会显示；所以建议使用post，安全

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
				<tr>
					<td>账户：</td>
					<td>
						<input type="text" name="uname" id="uname" value="" onblur="checkUname()" />
					</td>
					<td>
						<label id="msg1"></label>
					</td>
				</tr>
				<tr>
					<td>密码：</td>
					<td>
						<input type="password" name="pwd1" id="pwd1" value="" onblur="checkPwd(1)" />
					</td>
					<td>
						<label id="msg2"></label>
					</td>
				</tr>
				<tr>
					<td>确认密码：</td>
					<td>
						<input type="password" name="pwd2" id="pwd2" value="" onblur="checkEquals()" />
					</td>
					<td>
						<label id="msg3"></label>
					</td>
				</tr>
				<tr>
					<td>家庭住址：</td>
					<td>
						<select name="province" id="province" onchange="changeOpt()">
							<option value="请选择省份">--请选择省份--</option>
							<option value="河南省">--河南省--</option>
							<option value="四川省">--四川省--</option>
						<lect>
						<select name="cities" id="cities">
							<option value="请选择城市">--请选择城市--</option>
						<lect>
					</td>
					<td>
						
					</td>
				</tr>
				<tr>
					<td colspan="3" align="center">
						<input type="button" id="btn" value="提交" />
					</td>
				</tr>
			</table>
		<div id="result">
			
		</div>
    <script type="text/javascript">
    	function checkUname(){
    		//实现用户名验证，用户名只能是英文字母，且长度至少六位
    		var reg=/^[a_zA-Z]{6,}$/
    		//获取文本框中的值
    		var name=document.getElementById("uname").value
    		//判断
    		if(reg.test(name)){
    			document.getElementById("msg1").innerHTML="用户名格式正确"
    			return true;
    		}else{
    			document.getElementById("msg1").innerHTML="用户名格式不正确"
    		
    		}
    	}
    </script>
	</body>
</html>