【前端 HTML+CSS+JavaScript(JS)】DOM练习-用户名密码校验（表单校验）带注释/总结_"<div><label for=\"psd\">密码:</label><input type=\"-CSDN博客

本文链接：https://blog.csdn.net/cc2855816075/article/details/122932136

作业要求：

在这里插入图片描述

效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业1-表单校验</title>
		<script src="utility.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="b-box">
			<div>
				<label>用户名：</label>
				<input type="text" name="" id="usrName" value="" onblur="usrNameBlur()" onfocus="txtFocus('usr-lb','[不能为空，或纯数字。]')"/>
				<label id="usr-lb">[不能为空，或纯数字。]</label>
			</div>
			
			<div>
				<label>密码：</label>
				<input type="password" name="" id="psw" value="" onblur="pswBlur()" onfocus="txtFocus('psw-lb1','[不能为空，或纯数字。]')"/>
				<label id="psw-lb1">[不能为空，或纯数字。]</label>
			</div>
			
			<div>
				<label>确认密码：</label>
				<input type="password" name="" id="psw2" value="" onblur="pswAffirm()" onfocus="txtFocus('psw-lb2','[两次密码需一致。]')"/>
				<label id="psw-lb2">[两次密码需一致。]</label>
			</div>
			
			<div>
				<label>年龄：</label>
				<input type="text" name="" id="age" value="" onblur="age()" onfocus="txtFocus('age-lb','[年龄必须在15~150之间。]')"/>
				<label id="age-lb">[年龄必须在15~150之间。]</label>
			</div>
			
		</div>
		
		<script type="text/javascript">
		
			function txtFocus(a,b){
				var lb = $(a);
				lb.innerHTML = b;
				lb.style.color = "#000";
			}
			
			function usrNameBlur(){
				var usrName = $("usrName").value;
				var usr_lb = $("usr-lb");
				//★★★当parseInt 转换字符串的时候 前面是数字后面是字符的时候会转换成前面的数字★★★
				if(usrName != '' && isNaN(usrName) == true){
					usr_lb.innerHTML = "[√]";
					usr_lb.style.color = "green";
					$("usrName").style.borderColor = "green";
				}else{
					usr_lb.style.color = "red";
				}
			}
			
			function pswBlur(){
				var psw = $("psw").value;
				var psw_lb = $("psw-lb1");
				//★★★当parseInt 转换字符串的时候 前面是数字后面是字符的时候会转换成前面的数字★★★
				if(psw != '' && isNaN(psw) == true){
					psw_lb.innerHTML = "[√]";
					psw_lb.style.color = "green";
					$("psw").style.borderColor = "green";
				}else{
					psw_lb.style.color = "red";
				}
			}
			
			function pswAffirm(){	//确认密码
				var psw = $("psw").value;
				var psw2 = $("psw2").value;
				var psw_lb2 = $("psw-lb2");
				if(psw2 == psw){
					psw_lb2.innerHTML = "[√]";
					psw_lb2.style.color = "green";
					$("psw2").style.borderColor = "green";
				}else{
					psw_lb2.style.color = "red";
				}
			}
			
			function age(){
				var age = $("age").value;
				var age_lb = $("age-lb");
				if(age >= 15 && age <= 150){
					age_lb.innerHTML = "[√]";
					age_lb.style.color = "green";
					$("age").style.borderColor = "green";
				}else{
					age_lb.style.color = "red";
				}
			}
			
		</script>
		
	</body>
</html>

其中用到的utility.js文件：

function $(id){
	return document.getElementById(id);
}
function l(a){
	console.log(a);
}

DOM练习文件：

https://download.csdn.net/download/cc2855816075/80848641

注意：

1、当parseInt 转换字符串的时候前面是数字后面是字符的时候会转换成前面的数字，例如，123abc经过转换后为123。

【前端 HTML+CSS+JavaScript(JS)】DOM练习-用户名密码校验（表单校验） 带注释/总结

作业要求：

效果：

代码：

其中用到的utility.js文件：

DOM练习文件：

注意：

【前端 HTML+CSS+JavaScript(JS)】DOM练习-用户名密码校验（表单校验）带注释/总结