这篇文章主要为大家详细介绍了jQuery密码强度验证控件使用详解的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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;
}
.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密码强度验证控件使用详解的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下的更多相关文章
- 《手把手教你》系列技巧篇(七十一)-java+ selenium自动化测试-自定义类解决元素同步问题(详解教程)
1.简介 前面宏哥介绍了几种关于时间等待的方法,也提到了,在实际自动化测试脚本开发过程,百分之90的报错是和元素因为时间不同步而发生报错.本文介绍如何新建一个自定义的类库来解决这个元素同步问题.这样, ...
- 《手把手教你》系列基础篇(九十三)-java+ selenium自动化测试-框架设计基础-POM设计模式实现-上篇(详解教程)
1.简介 上一篇介绍了POM的基础理论知识和非POM方式写脚本,这篇介绍利用页面工厂类(page factory)去实现POM,通过查看PageFactory类,我们可以知道它是一个初始化一个页面实例 ...
- (转)[jQuery]使用jQuery.Validate进行客户端验证(初级篇)——不使用微软验证控件的理由
以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...
- 如何在一小时内更新100篇文章?-Evernote Sync插件介绍
上一篇"手把手教你制作微信小程序,开源.免费.快速搞定",已经教会你如何快速制作一个小程序,但作为资讯类小程序,内容不可少,并且还需要及时更新. 但是,如果让你复制粘贴,可能还需要 ...
- AFNetworking详解和相关文章链接
写在开头: 作为一个iOS开发,也许你不知道NSUrlRequest.不知道NSUrlConnection.也不知道NSURLSession...(说不下去了...怎么会什么都不知道...)但是你一定 ...
- elasticsearch最全详细使用教程:入门、索引管理、映射详解、索引别名、分词器、文档管理、路由、搜索详解
一.快速入门1. 查看集群的健康状况http://localhost:9200/_cat http://localhost:9200/_cat/health?v 说明:v是用来要求在结果中返回表头 状 ...
- 《手把手教你》系列技巧篇(三十九)-java+ selenium自动化测试-JavaScript的调用执行-上篇(详解教程)
1.简介 在做web自动化时,有些情况selenium的api无法完成,需要通过第三方手段比如js来完成实现,比如去改变某些元素对象的属性或者进行一些特殊的操作,本文将来讲解怎样来调用JavaScri ...
- 《手把手教你》系列基础篇(八十四)-java+ selenium自动化测试-框架设计基础-TestNG日志-上篇(详解教程)
1.简介 TestNG还为我们提供了测试的记录功能-日志.例如,在运行测试用例期间,用户希望在控制台中记录一些信息.信息可以是任何细节取决于目的.牢记我们正在使用Selenium进行测试,我们需要有助 ...
- 《手把手教你》系列基础篇(九十四)-java+ selenium自动化测试-框架设计基础-POM设计模式实现-下篇(详解教程)
1.简介 上一篇宏哥用PageFactory实现了POM,宏哥再介绍一下如果不用PageFactory如何实现POM. 2.项目实战 在这里宏哥以百度首页登录的例子,如果用POM实现,在测试脚本中实际 ...
随机推荐
- Oracle API Gateway连接WebService服务,攻击保护
1.启动和连接OAG OAG连接的时候除了不选择analysis,其他都选上,然后启动Gateway实例以及Nodemanager. 命令如下: /$OAG_HOME/apigateway/posix ...
- sqlserver用于统计表索引情况
/*eg: --调用该过程实例 --1 创建临时表 IF OBJECT_ID('tempdb..#index_sql_text') IS NOT NULL DROP TABLE #index_sql_ ...
- ubuntu16.04新服务器上配置selenium+firefox
ubuntu16.041安装pythonsudo apt-get install python默认2.7.122更新apt-getsudo apt-get update更新下apt-get库否则下载p ...
- unity 部分obj不接受后处理
考虑了很多方案,比如渲染次序和mask(stencilebuffer) 渲染次序 sorting order(深度) renderer都有的属性能开放出来,sprite renderer原本就开放在i ...
- python 下载小说
以下载官场风月小说为例: 具体代码: # coding=utf-8 import os import re from selenium import webdriver from selenium.c ...
- extjs4权限管理,actioncolumn列显示隐藏或禁用
//隐藏getClass: function(v, meta, rec) { if ( someCondition ) { return 'x-hidden' } }//加入其他样式getClass: ...
- VScode格式化vue文件
使用vscode编写vue文件的时候, 发现不能格式化,手动格式化代码,太费劲, 还有可能会出错, 不格式化,有的时候代码编写的时候, 没有很好的管理格式,不美观. 但是我们是可以修改让VScode可 ...
- 表单提交时上传图片 表单ajax提交
页面 <script type="text/javascript" src="js/jquery.form.js"></script>& ...
- LogManager
public class LogManager { // Fields public static bool Debugstate; // Methods public static void Log ...
- python——TypeError: 'str' does not support the buffer interface
import socket import sys port=51423 host="localhost" data=b"x"*10485760 #在字符串前加 ...