2021-9-26更新在下方
实验提示图:
实验要求
- 写一个用户注册的表单
- 检查用户输入的密码和确认密码是否一致,如果一致,则显示“密码一致”;否则,显示“密码不一致”。
实验提供思路
- 何时出发检测?
- 捕获用户输入的内容
- 比较用户输入的内容
- 输出比较后的信息
<!-- 表单检查.html -->
<!--
写一个用户注册的表单
检查用户输入的密码和确认密码是否一致,如果一致,则绿色显示“密码一致”;否则,显示“密码不一致”。
思路:
1. 何时出发检测?
2. 捕获用户输入的内容
3. 比较用户输入的内容
4. 输出比较后的信息
-->
<html>
<head>
<title>
表单检查
</title>
<meta charset="utf-8">
</head>
<body>
<h1>用户注册</h1>
<form action="" method="GET">
用户名:<input type="text">
<br>
密码:<input type="password" name="pass1" id="pass1" onblur="clicktest()">
<br>
确认密码:<input type="password" name="pass2" id="pass2" onblur="clicktest()">
<br>
<span id="msg"></span>
<br>
<input type="button" name = "sub" value="提交按钮">
</form>
</body>
<script>
function clicktest(){
var pass1 = document.getElementsByName("pass1")[0];
var pass2 = document.getElementsByName("pass2")[0];
var msg = document.getElementById("msg");
var sub = document.getElementsByName("sub")[0];
if (pass1.value == pass2.value) {
msg.innerHTML = "密码一致";
msg.style.color = 'green';
sub.disabled = "";
} else {
msg.innerHTML = "密码不一致";
msg.style.color = 'red';
sub.disabled = 'true';
}
}
</script>
</html>
成果
记录一下我初学js刚刚想出来的这一道题,虽然是通过了解老师的代码研究出来的比较简单的一道题,但是原理已经大概明白,纪念一下这个时刻=v=
更新:使用onblur属性和disable属性对此功能进行更新
onblur:onblur 事件会在对象失去焦点时发生。(官方解释)
选中当前的文本框,当离开文本框时就会触发onblur事件(我的理解)
密码:<input type="password" name="pass1" id="pass1" onblur="clicktest()">
<br>
确认密码:<input type="password" name="pass2" id="pass2" onblur="clicktest()">
disable:sub对象是对提交按钮进行的定义,当密码错误时,按钮会是灰的,无法点击选中;只有当密码正确时,按钮才会正常工作。
if(pass1.value != pass2.value){
meg.innerHTML = "密码错误,请重新输入密码";
meg.style.color = "red";
sub.disable = "true";
}
else{
meg.innerHTML = "密码正确";
meg.style.color = "blue";
sub.disable = "";
}