基于JavaScript实现密码框验证信息
更新时间：2021年11月11日 08:58:40 作者：前端小歌谣
这篇文章主要为大家详细介绍了基于JavaScript实现密码框验证信息，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现密码框验证信息的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url(./img/1.png) no-repeat left center;
padding-left: 10px;
}
.wrong {
color: red;
background-image: url(img/2.png);
}
.right {
color: green;
background-image: url(img/3.png);
}
</style>
</head>
<body>
<div class="register">
<input type="password" class="ipt">
<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>
运行结果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
废话少说，直接上Code,对IE与FF下的差异，均在代码中有相关的注解2010-03-03
上下滚动的效果，不用说，大家都有看到过，本文为大家介绍下使用jquery实现上下滚动效果，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
2008-02-02
websocket是H5才开始提供的一种在单个TCP连接上进行全双工通讯的协议,下面这篇文章主要给大家介绍了关于JS前端中WebSocket使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
Js随机产生6为数字的代码，需要的朋友可以参考下。2010-05-05
深入理解JavaScript中的尾调用(Tail Call)
尾调用（Tail Call）是函数式编程的一个重要概念，下面这篇文章主要给大家深入的介绍了关于JavaScript中尾调用的相关资料，文中介绍的非常详细，相信对大家具有一定的参考价值，有需要的朋友们下面来一起看看吧。2017-02-02
JavaScript用JQuery呼叫Server端方法示例代码
这篇文章主要介绍了JavaScript用JQuery呼叫Server端方法,需要的朋友可以参考下2014-09-09
这篇文章主要为大家详细介绍了微信小程序三级联动选择器使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-02-02
Javascript 中的 && 和 || ，有时候用作条件判断，非常的简洁，不熟悉的朋友可能不太了解，这里最后有个朋友补充，非常的好。2010-04-04
这篇文章主要介绍了JS 获取鼠标左右键的键值方法，很简单，但很实用，特别是在做与用户交互相关的东西2014-10-10
最新评论