js 密码框验证信息案例

最新推荐文章于 2024-04-08 21:28:38 发布

喝水都塞牙缝(//̀Д/́/)

最新推荐文章于 2024-04-08 21:28:38 发布

阅读量308

点赞数

分类专栏： JavaScript 文章标签： java javascript 前端

本文链接：https://blog.csdn.net/m0_59854777/article/details/121617282

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

js 密码框验证信息案例

    一个小小的案例，可供初学者参考，我也是初学写的，此代码写的是一个密码框，当输入信息与设定格式不符时后面提示报错信息

<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
    <title>仿新浪注册页面</title>	
		<style>
			.zhuce{
		        width:600px;
				margin:100px auto;
			}
			.message{
			    display:inline-block;
		        font-size:12px;
				color: #999;
				background:url(images/k3.jpg) no-repeat left center;
				padding-left:20px;
			}
			.wrong{
				color: red;
				background-image:url(images/aa1.jpg);  //错误图片地址
			}
			.right{
				color: green;
				background-image:url(images/aa2.jpg); //正确图片地址
			}

		</style>
  </head>

 <body>
		<div class="zhuce">
			<input type="password" name="" class="ipt" value="注册提示">
			<p class="message">请输入6~16位密码</p>
		</div>		
		
		<script>
			   
			//密码框验证信息案例
			    var ipt = document.querySelector('.ipt');  //获取元素
				var message = document.querySelector('.message');
			    ipt.onblur = function() {  //获得焦点事件
					if(this.value.length < 6 || this.value.length > 16) { //等于默认值便改变
					    message.className = 'message wrong';
						message.innerHTML = '你输入的位数不对';
					}
					else { 
					    message.className = 'message right';
						message.innerHTML = '你输入的位数正确';
					}
			    }  
                
			   
		</script> 
 </body>
</html>

喝水都塞牙缝(//̀Д/́/)

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js 密码框验证信息案例

js 密码框验证信息案例一个小小的案例，可供初学者参考，我也是初学写的，此代码写的是一个密码框，当输入信息与设定格式不符时后面提示报错信息<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>仿新浪注册页面</title> <style> .zhuce{ width:600p
复制链接

扫一扫

专栏目录