用户界面矫正

最新推荐文章于 2024-08-10 15:00:00 发布

紫夜✘

最新推荐文章于 2024-08-10 15:00:00 发布

阅读量87

点赞数 1

分类专栏：网页设计

本文链接：https://blog.csdn.net/Purple_night_/article/details/120544651

版权

HTML JavaScript 表单验证密码校验邮箱验证

关键词由CSDN通过智能技术生成

网页设计专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>用户注册</h2>
		用户名：<input type="text" size="12" /><br />
		<!-- 给password密码设置事件使用onblur事件命令 -->
		密码：<input  id="pwd" type="password" size="12" onblur="checkpassword()" /><span id="msg_pwd">*密码长度为6位</span><br />
		确认密码：<input id="rpwd" type="password" size="12"  onblur="checkpasswordrepeat()"/><span id="msg_pwd_r"></span><br />
		邮箱：<input id="email" type="text" size="12" onblur="checkEmail()"/><span id="msg_email">*邮箱账号必须合法</span><br />
		<input type="button" value="注册" />
	</body> 
</html>
<script>
//校验密码长度
function checkpassword(){
	elepwd=document.getElementById("pwd")
	if(elepwd.value.length!=6){
		document.getElementById("msg_pwd").style="color:red;"
	}
}
//校验确认密码
function checkpasswordrepeat(){
	elepwd=document.getElementById("pwd");
	elepwdr=document.getElementById("rpwd");
	if(elepwd.value!=elepwdr.value){
		document.getElementById("msg_pwd_r").innerText="两次输入的密码不一致";
		document.getElementById("msg_pwd_r").style="color:red;"
	}
}
//校验邮箱合法性
function checkEmail(){
	eleEmail=document.getElementById("email");
	if(eleEmail.value.indexOf("@")==-1){
		document.getElementById("msg_email").style="color:red;"
	}else{
		document.getElementById("msg_email").style="color:black;"
	}
}
</script>

紫夜✘

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用户界面矫正

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h2>用户注册</h2> 用户名：<input type="text" size="12" /><br /> <!-- 给password密码设置事件使用onblu.
复制链接

扫一扫

专栏目录