9.27js总结-优快云博客

本文链接：https://blog.youkuaiyun.com/gccv_/article/details/127092713

本文详细介绍了表单元素事件的应用，包括文本框的获得焦点(onFocus)、失去焦点(onBlur)事件及数据变更(onchange)事件的具体实现。通过示例展示了如何使用这些事件进行输入验证，如用户名和密码格式检查等。

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

表单元素事件

文本框失去焦点事件、获得焦点事件

onBlur:当失去输入焦点后产生该事件

onFocus:当输入获得焦点后，产生该文件

Onchange:当文字值改变时，产生该事件

<form action="#" method="post" id="form">
    <p>用户名: <input type="text" name="username" /></p>
    <p>
        <button>注册</button>
        <button type="reset">重置</button>
    </p>
</form>
<script>
    var form = document.getElementById('form');
    //给文本框设置聚焦和失焦
    //先获取文本框
    var input = form.username;
    //设置聚焦事件
    //元素.onfocus = function(){}
    input.onfocus = function () {
        this.style.background = "pink";
    }
    //元素.onblur = function(){}
    input.onblur = function () {
        this.style.background = "";
    }
</script>

表格案例：

<!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">
			<script type="text/javascript">
				function checkUname() {
					//实现用户名验证，用户名只能是英文字母，且长度至少六位
					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(){
				//		var reg=/^[1-9]{6,}$/
				//		var mima=document.getElementById("pwd1").value
				//		if(reg.test(mima)){
				//			document.getElementById("msg2").innerHTML="密码格式正确"
				//			return true;
				//		}else{
				//			document.getElementById("msg2").innerHTML="密码格式不正确"
				//			return false;
				//		}
				//	}
				//	function checkEquals(){
				//		var reg=/^[1-9]{6,}$/
				//		var mima=document.getElementById("pwd1").value
				//		var querenmima=document.getElementById("pwd2").value
				//		
				//		if(mima==querenmima){
				//			document.getElementById("msg3").innerHTML="确认密码"
				//			return true;
				//		}else{
				//			document.getElementById("msg3").innerHTML="两次密码不一致"
				//			return false;
				//		}
				//	}
				function checkPwd(n) {
					var pwd1 = document.getElementById("pwd1").value
					var pwd2 = 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.text(pwd2)) {
							document.getElementById("msg3").innerHTML = "确认密码格式正确"
							return true
						} else {
							document.getElementById("msg3").innerHTML = "确认密码格式不正确"
							return false
						}
					}
				}

				function checkEquals() {
					var pwd1 = document.getElementById("pwd1").value
					var pwd2 = document.getElementById("pwd2").value
					if(checkPwd(2)) {
						if(pwd1 == pwd2) {
							document.getElementById("msg3").innerHTML = "密码和确认密码不一致"
							return true
						} else {
							document.getElementById("msg3").innerHTML = "密码和确认密码不一致"
							return false
						}
					}

				}
				function changeOpt(){
					var cityList=new Array();
					cityList['请选择省份']=['请选择城市']
					cityList['河南省']=['郑州','开封','洛阳','焦作','商丘']
					cityList['四川省']=['成都','绵阳','德阳','自贡','泸州']
					var province=document.getElementById("province").value
					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)
						
						
					}
				
				
				
				
				}
			</script>
	</body>

</html>

全选/全不选

<body>
		<p>
			<input type="checkbox" id="selectAll">全选/全不选
		</p>
		<hr>
		<ul class="shop">
			<li><input type="checkbox">苹果</li>
			<li><input type="checkbox">香蕉</li>
			<li><input type="checkbox">梨</li>
			<li><input type="checkbox">桃子</li>
			<li><input type="checkbox">橘子</li>
		</ul>

		<script type="text/javascript">
			document.getElementById("selectAll").onclick = function() {
				var isChecked = this.checked
				var cbs = document.querySelectorAll(".shop input")
				for(var i = 0; i < cbs.length; i++) {
					cbs[i].checked = isChecked
				}
			}
			for(var i = 0; i < cbs.length; i++) {
				cbs[i].onclick = function() {
					var count = 0
					for(var j = 0; j < cbs.length; j++) {
						if(cbs[j].checked) {
							count++
						}
					}
					if(count == cbs.length) {
						document.getElementById("selectAll").checked = true
					} else {
						document.getElementById("selectAll").checked = false
					}
				}

			}
		</script>
	</body>