JS练习源码02_焦点事件与document对象应用

最新推荐文章于 2023-08-01 08:10:45 发布

菲儿啊

最新推荐文章于 2023-08-01 08:10:45 发布

阅读量199

点赞数 2

分类专栏： HTML5 CSS JS

本文链接：https://blog.csdn.net/qq_37717494/article/details/104515106

版权

HTML5 CSS JS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

问题描述：

界面：
在这里插入图片描述

源码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
		</style>
		<script type="text/javascript">
			//验证用户名
			function userLostFocus(){
				var userName = document.getElementById("username").value;
				if(userName == ""){
					document.getElementById("nameMsg").innerHTML="<font color='red' size='-1'>用户名不能为空</font>";
				}else if(!/^\w{4,16}$/.test(userName)){
					document.getElementById("nameMsg").innerHTML="<font color='red' size='-1'>用户名非法</font>";
				}
				else{
					document.getElementById("nameMsg").innerHTML="";
				}
			}
			//验证密码
			function psdLostFocus(){
				var psd = document.getElementById("psd").value;
				if(psd ==""){
					document.getElementById("psd").innerHTML="<font color='red' size='-1'>密码不能为空</font>";
				}else if(!/^\w{6,12}$/.test(psd)){
					document.getElementById("psdMsg").innerHTML = "<font color='red' size='-1'>密码非法</font>";
				}else{
					document.getElementById("psdMsg").innerHTML="";
				}
			}
			//验证密码是否一致
			function checkPsd(){
				var psd = document.getElementById("psd").value;
				var psd_confirm  = document.getElementById("psd_confirm").value;
				if(psd == ""){
					document.getElementById("psd_confirmMsg").innerHTML="<font color='red' size='-1'>确认密码不能为空</font>";
					return false;
				}else if(psd!=psd_confirm){
					document.getElementById("psd_confirmMsg").innerHTML="<font color='red' size='-1'>密码不一致，请重新输入</font>";
					document.getElementById("psd_confirm").value = "";
					return false;
				}else{
					document.getElementById("psd_confirmMsg").innerHTML="";
					return true;
				}
			}
		</script>
	</head>

	<body>
		<div>
			<img src="img/top.jpg" />
			<form action="" method="post"  οnsubmit="return checkPsd();">
				<table>
					<tr>
						<td class="words">用户名：</td>
						<td>
							<input type="text" id="username" name="username" size="20" maxlength="20" οnblur="userLostFocus()"/>
						</td>
						<td>
							<div id="nameMsg">只能输入字母或数字，4-16个字符</div>
						</td>
					</tr>
					<tr>
						<td class="words">密码：</td>
						<td>
							<input type="password" id="psd" name="psd" size="20" maxlength="20" οnblur="psdLostFocus()"/>
						</td>
						<td>
							<div id="psdMsg">密码长度6-12位</div>
						</td>
					</tr>
					<tr>
						<td class="words">确认密码：</td>
						<td>
							<input type="text" id="psd_confirm" name="psd_confirm"  size="20" maxlength="20" οnblur="checkPsd()"/>
						</td>
						<td>
							<div id="psd_confirmMsg"></div>
						</td>
					</tr>
					<tr>
						<td></td>
						<td colspan="2" align="center">
							<input type="reset" id="refill" name="refill" value="重填" style="margin-right: 20px;width: 100px;"/>
							<input type="submit" id="register" name="caculate" value="注册" style="width: 100px;"/>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>

</html>

菲儿啊

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS练习源码02_焦点事件与document对象应用

问题描述：界面：源码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> </style> <script type="text/javascript"&...
复制链接

扫一扫