HTML事件与表单验证-优快云博客

本文链接：https://blog.youkuaiyun.com/Emperorn/article/details/127074432

本文介绍了HTML中常见的事件类型及绑定方式，并通过实例展示了如何使用JavaScript进行表单验证，包括用户名、密码等字段的有效性检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件注册方式

将事件绑定到元素属性

将事件绑定到对象属性

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function show(){
				alert("行间事件");
			}
		</script>
	</head>
	<body>
		<input type="button"value="确定" onclick="show" />
	</body>
</html>

鼠标事件

onmousedown：按下鼠标键

onmousemove：移动鼠标

onmouseout：鼠标离开某一个网页对象

onmouseover：鼠标移动到某一个网页对象上

onmouseup：松开鼠标键

onclick：单击鼠标键

ondblclick：双击鼠标键

键盘事件

onkeydown：按下一个键

onkeyup：松开一个键

onkeypress：按下然后松开一个键

Window对象

onload()：对象装载完成弧触发

onscroll()：窗口的滚动条被拖动时触发

onresize()：窗口的大小改变时触发

onblur()/onfocus()：窗口失去/获得焦点时触发

onerror()：遇到执行错误时触发

onunload()：对象被卸载后触发

<!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>
						<select>
							<select name="cities" id="cities">
								<option value="请选择城市">--请选择城市--</option>
								<select>
				</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() {
				//实现用户名验证，用户名只能是英文字母，且长度至少6位
				var reg = /^[a-zA-z]{6,}$/
				//获取文本框中的值
				var username = document.getElementById("uname").value
				if (reg.test(username)) {
					document.getElementById("msg1").innerHTML = "用户名格式正确"
					return true
				} else {
					document.getElementById("msg1").innerHTML = "用户名格式不正确"
					return false
				}
			}
			//密码和确认密码格式都必须是由数字、字母、下划线组成，且长度必须在六位以上
			function checkPwd(n) {
				var pwd1 = document.getElementById("pwd1").value
				var pwb2 = document.getElementById("pwd2").value
				var reg = /^\w{6,}$/
				if (n == 1) {
					if (reg.test(pwd1)) {
						document.getElementById("msg2").innerHTML = "密码格式正确"
						return true
					} else {
						document.getElementById("msg2").innerHTML = "密码格式不正确"
						return false
					}
				} else {
					if (reg.test(pwb2)) {
						document.getElementById("msg3").innerHTML = "确认密码格式正确"
						return true
					} else {
						document.getElementById("msg3").innerHTML = "确认密码密码格式不正确"
						return false
					}
				}
			}
			
			//用来判断密码和确认密码是否一致
			function checkEquals() {
				var pwd1 = document.getElementById("msg3").value
				var pwd2 = document.getElementById("msg3").value
				//经验确认密码的格式是否正确
				if (pwd1) {
					document.getElementById("msg3").innerHTML = "密码和确认密码一致"
					return true
				} else {
					document.getElementById("msg3").innerHTML = "密码和确认密码不一致"
					return false
				}
			}
			function changeOpt(){
				var citylist = new Array();
				citylist['请选择省份']=['--请选择城市--'];
				citylist['河南省']=['郑州','开封','洛阳','商丘','焦作'];
				citylist['四川省']=['成都','绵阳','德阳','自贡','泸州']
				// console.log(citylist['河南省'][0])
				//获取选中的下拉列表项（省份）
				var province = document.getElementById("province").value
				// console.log(province)
				//将下拉列表项清空
				document.getElementById("cities").options.length=0
				for(var i =0;i<citylist[province].length;i++){
					var opt=new Option(citylist[province][i],citylist[province][i])
					document.getElementById("cities").options.add(opt)
				}
				//提交
				document.getElementById("btn").onclick=function(){
					if(checkUname()&&checkPwd()&&checkEquals()){
						alert("注册成功")
					}else{
						alert("注册失败")
					}
				}
			}
		</script>
	</body>
</html>

表单元素-下拉列表

value：被选中项的value值

length：下拉选项的个数

selectedlndex：选中项的索引，可以修改选中项

options：所有下拉选项的数组

onblur：下拉列表失去焦点时触发

onfocus：下拉列表获得焦点时触发

onchanoe：选项发生改变时触发