返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript实现密码框验证信息
  • 245
分享到

JavaScript实现密码框验证信息

2024-04-02 19:04:59 245人浏览 安东尼
摘要

本文实例为大家分享了javascript实现密码框验证信息的具体代码,供大家参考,具体内容如下 效果展示: 代码展示 <!DOCTYPE html> <ht

本文实例为大家分享了javascript实现密码框验证信息的具体代码,供大家参考,具体内容如下

效果展示:

代码展示


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/CSS" href="fontss2/iconfont.css" rel="external nofollow" />
  <style>
   .orginal {
    font-size: 13px;
    color: deepskyblue;
   }
   .wrong {
    font-size: 13px;
    color: red;  
   }
   .right {
    font-size: 13px;
    color: green;
   }
  </style>
 </head>
 <body>
  <p>
   <input type="text"><span class="orginal icon-wenhao iconfont">请输入6-16位密码</span>
  </p>
  <script>
   //获取元素对象
   var input = document.querySelector('input');
   var span = document.querySelector('span');

   // 注册事件 失去焦点事件
   input.onblur = function() {
    if (input.value.length > 0 && input.value.length < 6 || input.value.length > 16) {
     span.className = 'iconfont icon-cuowuguanbiquxiao-xianxingyuankuang wrong';
     span.innerHTML= '输入错误请输入6-16位密码';
    }else if(input.value.length >=6 && input.value.length <=16) {
     span.className = 'iconfont  icon-yiyanzheng  right';
     span.innerHTML = '输入正确';
    }else {
     span.className = 'orginal icon-wenhao iconfont';
     span.innerHTML = '请输入6-16位密码';
    }
   }
  </script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: JavaScript实现密码框验证信息

本文链接: https://lsjlt.com/news/156980.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript实现密码框验证信息
    本文实例为大家分享了JavaScript实现密码框验证信息的具体代码,供大家参考,具体内容如下 效果展示: 代码展示 <!DOCTYPE html> <ht...
    99+
    2024-04-02
  • 基于JavaScript实现密码框验证信息
    本文实例为大家分享了JavaScript实现密码框验证信息的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en...
    99+
    2024-04-02
  • JavaScript实现密码框输入验证
    有时需要在前端页面,用户输入时先进行简单的验证,减少服务器压力 例如,限定了字段的输入长度: 输入框后有输入范围提示信息 输入错误长度的话,变成错误提示信息 输入正确长度的话,显示正...
    99+
    2024-04-02
  • Android实现短信验证码输入框
    本文实例为大家分享了Android实现短信验证码输入框的具体代码,供大家参考,具体内容如下 其实用官方自定的那个inputEditText默认带下划线的,然后自己再实行焦点和输入框...
    99+
    2024-04-02
  • javascript如何实现发送短信验证码
    这篇文章主要介绍“javascript如何实现发送短信验证码”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“javascript如何实现发送短信验证码”文章能帮助大家解决问题。效果如下:代码思路:按钮...
    99+
    2023-07-02
  • javascript实现发送短信验证码案例
    本文实例为大家分享了javascript实现发送短信验证码的具体代码,供大家参考,具体内容如下 效果如下: 代码思路: 1.按钮点击之后,会禁用disabled 为true2.同时...
    99+
    2024-04-02
  • 手动实现js短信验证码输入框
    前言   本文记录一下自己手动实现的一个前端常见的短信验证码输入组件,从需求到实现逐步优化的过程。 正文   1.需求分析   首先看一下效果图。     首先页面加载的时...
    99+
    2024-04-02
  • vue_drf实现短信验证码
    目录一、需求1,需求二、sdk参数配置  1,目录结构三、代码实现1,后端代码2,前端代码一、需求 1,需求   我们在做网站开发时,登录页面很多情况下是可以用手机号接收短信验证码,...
    99+
    2024-04-02
  • 短信验证码—Java实现
    在业务需求中我们经常会用到短信验证码,比如手机号登录、绑定手机号、忘记密码、敏感操作等,都可以通过短信验证码来保证操作的安全性,于是就记录下了一次开发的过程。 一.架构设计 发送短信是一个比较慢的过程,因为需要用到第三方服务(腾讯云短信...
    99+
    2023-08-17
    java rabbitmq redis 腾讯云 spring boot
  • JavaScript实现验证码案例
    本文实例为大家分享了JavaScript实现验证码效果的具体代码,供大家参考,具体内容如下 今天的案例,效果如下: 这个案例的实现其实没有很多难点,让我们一起来看看吧~ html和...
    99+
    2024-04-02
  • JavaScript实现滑块验证码
    本文实例为大家分享了JavaScript实现滑块验证码的具体代码,供大家参考,具体内容如下 效果:鼠标在底部滑块上按下按住不松拖动可以移动滑块,上面大图里面带有小图背景的滑块也会跟随...
    99+
    2024-04-02
  • uniapp自定义输入框,实现验证码输入框、密码输入框、兼容微信小程序
    前言 在移动端或者小程序项目中,验证码输入框、密码输入框也是很常见的,今天我们就来实现一个这样的效果。 图片展示 代码实现 我这里是用uniapp实现的可兼容微信小程序。 大家如果需要微信小程序也可以参考此案例,实现思路都是一样的。 {{...
    99+
    2023-08-18
    微信小程序 uni-app 小程序
  • JavaScript正则验证密码强弱度的实现方法
    展示 设计 密码强弱度分析 密码由数字,字母,特殊符号组成 密码: 只有数字- 或者是只有字母,或者是只有特殊符号——1级:弱 两两组合: 数字和字母, 数字...
    99+
    2024-04-02
  • JavaScript实现移动端短信验证码流程介绍
    目录实战效果演示实现原理代码部分HTMLJS实战效果演示 实现原理 准备: 一个输入框, 四个div小盒子 原理: 监听input输入框,分别让输入的四个数字展现在那四个小盒子里,...
    99+
    2024-04-02
  • Nodejs实现短信验证码功能
    使用Nodejs的开发者愈来越多,基于Nodejs的后台开发也多了起来,像短信验证码、短信群发、国际短信这些需求,完全可以采用第三方接口来实现,云片就提供了这样的接口。 Nodejs // 修改为您的a...
    99+
    2022-06-04
    验证码 短信 功能
  • vue怎么实现短信验证码
    这篇文章主要讲解了“vue怎么实现短信验证码”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue怎么实现短信验证码”吧!一、需求1,需求  我们在做网站开发...
    99+
    2024-04-02
  • Java如何实现短信验证码
    本篇内容主要讲解“Java如何实现短信验证码”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Java如何实现短信验证码”吧!截图展示实现代码后台接收前台的kgCaptchaToken进行验证,验证...
    99+
    2023-07-05
  • 微信小程序如何实现6位或多位验证码密码输入框功能
    小编给大家分享一下微信小程序如何实现6位或多位验证码密码输入框功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、效果图如下:...
    99+
    2024-04-02
  • JavaScript实现随机生成验证码及校验
    本文实例为大家分享了JavaScript实现随机生成验证码及校验的具体代码,供大家参考,具体内容如下 输入验证码(区分大小写)点击确认,进行校验。出错就弹框提示 点击 看不清 重新随...
    99+
    2024-04-02
  • golang怎么使用Gin框架实现短信验证码功能
    golang怎么使用Gin框架实现短信验证码功能,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。使用json配置文件// 配置文件 "...
    99+
    2023-06-20
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作