快捷導(dǎo)航

jquery判斷密碼強(qiáng)度的驗(yàn)證代碼

更新時(shí)間：2020年04月22日 14:54:56 作者：天涯想

本文主要介紹了jquery判斷密碼強(qiáng)度的驗(yàn)證代碼，這是一個(gè)非常常見(jiàn)的功能，在輸入密碼的時(shí)候提示密碼的強(qiáng)度，本文使用jQuery來(lái)實(shí)現(xiàn)，有需要的小伙伴可以參考下。

本文實(shí)例講述了jquery判斷密碼強(qiáng)度的驗(yàn)證代碼，分享給大家供大家參考。具體如下：
預(yù)想的效果截圖如下：

JS代碼：

$('#pass').keyup(function(e) {
 var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
 var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
 var enoughRegex = new RegExp("(?=.{6,}).*", "g");
 if (false == enoughRegex.test($(this).val())) {
 $('#passstrength').html('More Characters');
 } else if (strongRegex.test($(this).val())) {
 $('#passstrength').className = 'ok';
 $('#passstrength').html('Strong!');
 } else if (mediumRegex.test($(this).val())) {
 $('#passstrength').className = 'alert';
 $('#passstrength').html('Medium!');
 } else {
 $('#passstrength').className = 'error';
 $('#passstrength').html('Weak!');
 }
 return true;
});

頁(yè)面：

<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>

以上就是jquery判斷密碼強(qiáng)度的驗(yàn)證代碼，大家可以應(yīng)用到自己的項(xiàng)目中，希望大家喜歡。

您可能感興趣的文章:

相關(guān)文章

JQuery報(bào)錯(cuò)Uncaught TypeError: Illegal invocation的處理方法
這篇文章主要介紹了JQuery報(bào)錯(cuò)"Uncaught TypeError: Illegal invocation"的處理方法,需要的朋友可以參考下
2015-03-03
jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)Div層背景變顏色的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)Div層背景變顏色的方法,涉及jQuery中hover及addClass方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
通過(guò)實(shí)例解析jQ Ajax操作相關(guān)原理
這篇文章主要介紹了通過(guò)實(shí)例解析jQ Ajax操作相關(guān)原理,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-09-09
基于jQuery的message插件實(shí)現(xiàn)右下角彈出消息框
有時(shí)在頁(yè)面加載的時(shí)候，需要在頁(yè)面的右下角彈出一個(gè)小的提示框，顯示一些提示信息給用戶，通過(guò)使用jQuery的message插件，可以很方便的實(shí)現(xiàn)這個(gè)效果，在使用之前先介紹一下message插件中的方法的使用。
2011-01-01
jQuery實(shí)現(xiàn)表格隔行換色
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表格隔行換色，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-09-09
jQuery實(shí)現(xiàn)web頁(yè)面櫻花墜落的特效
這篇文章主要介紹了jQuery實(shí)現(xiàn)web頁(yè)面櫻花墜落的特效,效果非常棒，需要的朋友可以參考下
2017-06-06
輕松搞定jQuery.noConflict()
輕輕松松搞定jQuery.noConflict()，jQuery.noConflict()背后實(shí)現(xiàn)原理值得Web開(kāi)發(fā)者學(xué)習(xí)了解掌握，感興趣的小伙伴們可以參考一下
2016-02-02
jQuery實(shí)現(xiàn)表格凍結(jié)頂欄效果
昨天晚上公司遇到個(gè)小需求，就是實(shí)現(xiàn)類(lèi)似表格凍結(jié)頂欄的效果。這篇文章主要介紹了jQuery實(shí)現(xiàn)表格凍結(jié)頂欄效果 ,需要的朋友可以參考下
2017-08-08
jQuery 選擇器理解
凡是運(yùn)用$,其返回值是一個(gè)object $選擇器主要用于選擇標(biāo)簽.基本用法是同css的選擇器.
2010-03-03
Jquery 組合form元素為json格式,asp.net反序列化
Jquery組合form元素為json格式,asp.net反序列化實(shí)現(xiàn)代碼，大家可以具體的看下面的說(shuō)明。
2009-07-07