jQuery密码强度验证控件使用详解

2024-11-30 22:31:04

本文实例为大家分享了jQuery密码强度验证控件，供大家参考，具体内容如下

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="jquery-1.12.1.js"></script>
    <style type="text/css">
      .mainPrompt {
        border: #999 solid 1px;
        border-radius: 13px;
        overflow: hidden;
        padding: 1px 2px;
        display: inline-block;
        height: 20px;
      }
      .listPrompt {
        float: left;
        height: 20px;
        width: 56px;
        margin-right: 2px;
        background-color: #eeeeee;
      }
      .bot_text span {
        width: 52px;
        text-align: center;
        display: inline-block;
        line-height: 18px;
      }
    </style>
  </head>
  <body>
    <br/>
    <div>
      <p id="PromptMessage" style="margin-left: 200px;">
          新密码请至少使用字母、数字、符号两种<br/>类型组合的密码，长度为6~20位。</p>
      <input type="text" id="txtPassword" style="float: left;"/ placeholder="请输入密码">
      <div style="margin-left: 30px;font-size: 12px;float: left;">
        <div class="mainPrompt" align="center" bgcolor="#f5f5f5">
          <div class="listPrompt" id="strength_L" style="border-radius: 8px 0px 0px 8px;">
          </div>
          <div class="listPrompt" id="strength_M">
          </div>
          <div class="listPrompt" id="strength_H" style="margin-right: 0px;border-radius: 0 8px 8px 0;">
          </div>
        </div>
        <div class="bot_text">
          <span id="lowStrength">低</span> <span id="midStrength">
            中</span> <span id="highStrength">高</span>
        </div>
      </div>
    <div>
    <script type="text/javascript">
      function JudgyPwdLevel(pwdStr) {
        var hasNumber = 0;
        var hasLetter = 0;
        var hasSymbol = 0
        if (pwdStr.length >= 6) {
          for (var i = 0; i < pwdStr.length; i++) {
            var item = pwdStr[i];
            if (item >= '0' && item <= '9') { hasNumber = 1; }
            else if ((item >= 'a' && item <= "z") || (item >= 'A' && item < "Z")) { hasLetter = 1; }
            else { hasSymbol = 1; }
          }
        }
        return hasLetter + hasNumber + hasSymbol;
      }
      //显示颜色
      function pwStrength(pwd) {
        O_color = "#eeeeee";
        L_color = "#FF0000";
        M_color = "#FF9900";
        H_color = "#33CC00";
        if (pwd == null || pwd == '') {
          Lcolor = Mcolor = Hcolor = O_color;
        }
        else {
          S_level = JudgyPwdLevel(pwd);
          switch (S_level) {
            case 0:
              Lcolor = Mcolor = Hcolor = O_color;
            case 1:
              Lcolor = L_color;
              Mcolor = Hcolor = O_color;
              break;
            case 2:
              Lcolor = L_color;
              Mcolor = M_color;
              Hcolor = O_color;
              break;
            default:
              Lcolor = L_color;
              Mcolor = M_color;
              Hcolor = H_color;
          }
        }
        document.getElementById("strength_L").style.background = Lcolor;
        document.getElementById("strength_M").style.background = Mcolor;
        document.getElementById("strength_H").style.background = Hcolor;
        return;
      }
      $("#txtPassword").keyup(function(e){
       pwStrength($(e.target).val());
      });

    </script>
  </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jQuery插件passwordStrength密码强度指标详解

passwordStrength插件能够根据用户输入的密码,以图形化方式显示密码的强度. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>passwordStrength</title> <link href="css/style.css" rel=
jQuery实现注册会员时密码强度提示信息功能示例

本文实例讲述了jQuery实现注册会员时密码强度提示信息功能.分享给大家供大家参考,具体如下: 1.效果如图所示: 2.html代码: <p><span>设置密码:</span><input type="password" id="external_regist_password1" name="password1" value="" /><b>*</b>
jQuery实用密码强度检测

JQ实用密码强度检测通过正则来判断验证密码强弱并通过替换提示图片进行显示. 素材图片,请自取: html源码: <table style="width:320px;margin:40px auto;"> <tr> <th>密码</th> <td><span class="tbl-txt"><input id="pass" class="input-style
passwordStrength 基于jquery的密码强度检测代码使用介绍

查看示例:DEMO 打包下载使用很简单. 复制代码代码如下: $('#pass').passwordStrength(); XHTML 复制代码代码如下: <p><label>请输入密码:</label> <input type="password" id="pass" class="input" /></p> <div id="passwordStrengthD
jQuery密码强度检测插件passwordStrength用法实例分析

本文实例讲述了jQuery密码强度检测插件passwordStrength用法.分享给大家供大家参考,具体如下: 这里赋予密码强度为10个等级(实例中的progressImg1.png是一张包含十个状态的图片),然后通过设置每个状态的CSS样式来直观地显示当前密码的强度.其中,实现此功能的重点和难点就是通过正则进行判断等级,有兴趣的朋友可以慢慢探究. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-passwordStrength
基于JQuery的密码强度验证代码

因为是基于JQuery的控件,当然需要JQuery库,还要一个本控件的JS.JQuery的JS大家可以到官网下载:http://code.jquery.com/jquery-1.4.2.min.js 这个控件的JS文件:password_strength_plugin.js password_strength_plugin.js 复制代码代码如下: (function($){ $.fn.shortPass = 'Too short'; $.fn.badPass = 'Weak'; $.f
jquery判断密码强度的验证代码

本文实例讲述了jquery判断密码强度的验证代码,分享给大家供大家参考.具体如下: 预想的效果截图如下: JS代码: $('#pass').keyup(function(e) { var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); var mediumRegex = new RegExp("^(?=.{7,})(((?=.
jQuery判断密码强度实现思路及代码

复制代码代码如下: <head> <title></title> <script src="jquery-1.9.1.js" type="text/javascript"></script> <style type="text/css"> .qiang{background:url(/images/pas4.JPG) no-repeat;width:150px;height
jquery密码强度校验

本文实例讲述了jquery密码强度校验的验证代码,分享给大家供大家参考.具体如下: 预想的效果截图如下: 关键代码: <script> //下面的正则表达式建议各位收藏哦,项目上有可能会用得着 $(function(){ $('#pass').blur(function(e) { // alert('---------'); //密码为八位及以上并且字母数字特殊字符三项都包括 var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=
jQuery实现提示密码强度的代码

如何实现色条随输入密码长度变化效果: 在很多网站注册页面都有这样的功能,当用户输入密码的时候,下面会出现一个色条,色条的长度会跟随输入密码的长度变化,并且色条的颜色也会根据输入密码长度的不同有所改变,一般是用来提示密码强度.下面就简单介绍一下使用jQuery如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我们</tit

jQuery密码强度验证控件使用详解

相关推荐

随机推荐