`
star65225692
  • 浏览: 277144 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类

jquery密码强度检测:passwordStrength

 
阅读更多

我们设定密码强度等级为10,制作一张图片表示每个等级状态,给密码框绑定keyup事件,通过keyup事件获取密码值,然后使用正则进行判断密码强度等级,然后变换相应的图片。

使用很简单。

  1. $('#pass').passwordStrength();   

XHTML

  1. <p><label>请输入密码:</label>   怪蜀黍
  2. <input type="password" id="pass" class="input" /></p>   
  3. <div id="passwordStrengthDiv" class="is0"></div>    
  4. <p><label>确认密码:</label>   
  5. <input type="password" id="repass" class="input" /></p>   

注意:id#passwordStrengthDiv的DIV是用来加载强度图片的,你也可以自定义ID,但调用时就要给参数赋值:

  1. targetDiv : '#ID' //自定义加载图片的ID   

载入JS和CSS:

  1. <link rel="stylesheet" type="text/css" href="style/main.css" />   
  2. <script type="text/javascript" src="jquery.js"></script>   
  3. <script type="text/javascript" src="jquery.passwordStrength.js"></script>   
  4. <script type="text/javascript">   
  5. $(function(){   
  6.     $('#pass').passwordStrength();   
  7. });   
  8. </script>  
分享到:
评论

相关推荐

    Jquery插件之密码强度检测:passwordStrength

    Jquery插件之密码强度检测:passwordStrength

    jQuery密码强度检测插件passwordStrength用法实例分析

    本文实例讲述了jQuery密码强度检测插件passwordStrength用法。分享给大家供大家参考,具体如下: 这里赋予密码强度为10个等级(实例中的progressImg1.png是一张包含十个状态的图片),然后通过设置每 个状态的CSS...

    jQuery+passwordStrength密码强度检测

    总结来说,`jQuery+passwordStrength`的密码强度检测方案是通过jQuery监听用户输入,调用插件进行评估,再将结果反馈给用户,帮助他们创建更安全的密码。这种技术在现代Web应用中广泛应用,提高了用户账户的安全性。

    jQuery密码强度检测插件

    jQuery密码强度检测插件是一种实用工具,它能够帮助开发者实现对用户输入密码的安全性进行实时评估,从而提升网站的安全标准。本插件利用jQuery库的强大功能,通过简单的API调用就能集成到任何网页项目中,提供直观...

    jQuery_passwordStrength_密码强度检测_输入框设计_jquery_

    `jQuery_passwordStrength` 提供了一种实用的方法,通过JavaScript库jQuery实现了一个带有密码强度检测功能的输入框设计。这个功能可以帮助用户创建更安全的密码,提升网站的整体安全性。 **jQuery** 是一个广泛...

    passwordStrength 基于jquery的密码强度检测.zip

    "passwordStrength 基于jquery的密码强度检测"是一个专门为jQuery框架设计的插件,用于实时评估用户输入的密码强度,并提供反馈。下面我们将详细探讨这个插件的工作原理、使用方法以及其在实际开发中的应用。 1. **...

    基于jquery的密码强度检测

    基于jQuery的密码强度检测是一种常见的实现方式,它能够实时地评估用户输入的密码强度,并通过视觉反馈告知用户密码的安全级别。本教程将深入探讨如何利用jQuery实现这一功能。 首先,我们需要了解密码强度检测的...

    passwordStrength的密码强度检测.rar

    "passwordStrength的密码强度检测"这个主题主要涉及JavaScript(JS)技术,特别是前端开发中用于增强用户密码安全性的实践。在这个项目中,我们可能会看到一个用于评估用户输入密码复杂度的脚本,这通常包括对密码...

    jquery 检测密码强度插件

    这通常涉及到引入jQuery库和密码强度插件的脚本文件,然后使用jQuery选择器找到密码输入框,并调用插件的方法来启用密码强度检测。例如: ```html &lt;!DOCTYPE html&gt; &lt;script src="https://code.jquery....

    jquery 密码强度

    **jQuery密码强度插件详解** 在网络安全日益重要的今天,用户密码的安全性成为了网站开发者必须考虑的重要因素。jQuery作为一款广泛使用的JavaScript库,提供了丰富的插件来帮助开发者实现各种功能,其中包括密码...

    passwordStrength 基于jquery的密码强度检测代码使用介绍

    虽然 `passwordStrength` 提供了基本的密码强度检测,但你可以根据项目需求进行扩展。例如,可以通过修改 `jquery.passwordStrength.js` 中的源码来添加或调整密码强度检查的规则。此外,可以自定义 CSS 样式来自...

    jquery密码强度百分比.zip

    在这个“jquery密码强度百分比”项目中,我们将会探讨如何使用jQuery来实现一个动态显示密码强度百分比的功能。这个功能通常用于帮助用户在输入密码时了解他们的密码安全级别。 首先,我们需要一个HTML表单,包含一...

    再次修改后的JQUERY密码强弱度提示插件

    为了提高用户密码的复杂性和安全性,开发者通常会使用密码强度检测工具。本文将深入探讨一个经过再次修改的jQuery密码强弱度提示插件,它具有对中英文支持及强弱进度条显示的功能。 ### 一、插件简介 这个修改后的...

    jquery密码强度百分比特效代码

    总之,jQuery密码强度百分比特效代码结合了jQuery的事件处理和CSS3的动画效果,为用户创建了一种直观且互动的密码强度检测方式,提高了网页的安全性和用户体验。理解并掌握这种技术对于前端开发者来说是十分有益的。

    asp.net中密码强度显示代码

    在ASP.NET中实现这个功能,我们通常会使用JavaScript或者jQuery来实时检测用户输入的密码强度,并通过CSS显示相应的指示条。以下是实现该功能的关键步骤: 1. **HTML布局**:创建一个密码输入框、一个显示强度的...

    jquery.validate.1.8.1.rar

    例如,我们可以添加自定义验证规则,检测密码强度: ```javascript $.validator.addMethod("passwordStrength", function(value) { // 验证密码复杂度逻辑 }, "密码必须包含大小写字母和数字"); $("#myForm")....

    jquery 校验大全 实例

    例如,如果你想验证密码强度,你可以创建一个名为`passwordStrength`的方法: ```javascript $.validator.addMethod("passwordStrength", function(value) { // 这里实现密码强度的逻辑 }, "密码必须包含大写字母...

    jQuery实现密码强度的智能判断特效特效代码

    在`js`文件夹中,可能有一个名为`passwordStrength.js`的脚本,这是实现密码强度判断的核心。该脚本会分析用户输入的密码,根据一些预定义的规则(例如长度、数字、大写字母、特殊字符等)来评估其强度,并返回一个...

Global site tag (gtag.js) - Google Analytics