vue框架做的网站,吴正斌建盏简介,淘客网站如何做推广,网站推广链接怎么做用户在创建一个账户时#xff0c;需要设置一个密码。密码的复杂程度是安全的保障之一#xff0c;但是有些用户在设置密码时#xff0c;总是把密码设置的过于简单#xff0c;导致用户账户的安全存在威胁。因此#xff0c;为了提高用户账户的安全性#xff0c;添加了一个Ja…用户在创建一个账户时需要设置一个密码。密码的复杂程度是安全的保障之一但是有些用户在设置密码时总是把密码设置的过于简单导致用户账户的安全存在威胁。因此为了提高用户账户的安全性添加了一个JavaScript正则表达式验证密码复杂度的验证功能。
效果图是仿照腾讯企业邮箱修改密码时的验证方式-修改密码效果图
我把它扣了下来可能效果不如腾讯企业邮的但是效果还是实现了。没有添加常见密码的验证。 代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlescript srchttps://cdn.staticfile.org/jquery/1.10.2/jquery.min.js/scriptstyle.rules_check_wrap{ position:absolute; top:274px; left:50%; margin-left:-14px; text-align:left; background:#fff; padding:10px; font-size:12px; color:#494949; border-radius:5px; border:1px solid #bbb; box-shadow:0px 0px 5px #ccc;}.rules_check_wrap h3{ font-weight:bold; color:#232323; margin:0; padding:5px 0 5px 19px; font-size:12px; height:14px; line-height:14px;}.rules_check_wrap li{ height:14px; line-height:14px; padding:4px 0;}.icon_rules_check{ float:left; height:14px; width:14px; margin:-2px 4px 0 -10px; background:url(./img/none.png) no-repeat;}.rules_check_pass{opacity:.6;filter:alpha(opacity60);}.arrow_l, .arrow_r{position:absolute;top:0;left:0;margin-top:54px;margin-left:-20px;display:block; width:0; height:0; font-size:0; overflow:hidden; border:10px solid transparent; _border-color:tomato; _filter:chroma(colortomato);}.arrow_l{ border-right-color:#bbb;}.arrow_r{ border-right-color:#fff; margin-left:-19px;}.rules_check_wrap{display:none;left:584px;top:85px;z-index:10;}.rules_check_wrap ul{list-style:none;padding:1px 10px;margin:1px;}.rules_check_pass .icon_rules_check{ background:url(./img/pass.png) 0px 2px no-repeat;}.rules_check_fail .icon_rules_check{background:url(./img/fail.png) 0px 2px no-repeat;}.rules_check_pass{opacity:.6;filter:alpha(opacity60);}/style
/head
body classtbody onloadscript$(function(){$(#newsecpwd).focus(function(){$(.rules_check_wrap).css(display,block);});$(#newsecpwd).blur(function(){$(.rules_check_wrap).css(display,none);});});function onchangpwd(){// var newpwd document.getElementById(newsecpwd).value;var newpwd $(#newsecpwd).val();var user admin;if(newpwd ! ){//判断是否同时包含大写字母、小写字母和数字var baohan /^(?.*[a-z])(?.*[A-Z])(?.*\d)/;if(baohan.test(newpassword)){$(.rules_check_wrap ul li:eq(0)).removeClass();$(.rules_check_wrap ul li:eq(0)).addClass(rules_check_pass);}else{$(.rules_check_wrap ul li:eq(0)).removeClass();$(.rules_check_wrap ul li:eq(0)).addClass(rules_check_fail);$(input[namerepassword]).attr(disabled,true);}//密码长度判断if(newpassword.length 6 newpassword.length 0 || newpassword.length 18){$(.rules_check_wrap ul li:eq(1)).removeClass();$(.rules_check_wrap ul li:eq(1)).addClass(rules_check_fail);$(input[namerepassword]).attr(disabled,true);}else if(newpassword.length 6 newpassword.length 18){$(.rules_check_wrap ul li:eq(1)).removeClass();$(.rules_check_wrap ul li:eq(1)).addClass(rules_check_pass);}else if(newpassword.length 0){$(.rules_check_wrap ul li:eq(1)).removeClass();$(input[namerepassword]).attr(disabled,true);}//判断是否存在账户信息和空格if(/admin/.test(newpassword)){$(.rules_check_wrap ul li:eq(2)).removeClass();$(.rules_check_wrap ul li:eq(2)).addClass(rules_check_fail);$(input[namerepassword]).attr(disabled,true);}else if(/\s/.test(newpassword)){$(.rules_check_wrap ul li:eq(2)).removeClass();$(.rules_check_wrap ul li:eq(2)).addClass(rules_check_fail);$(input[namerepassword]).attr(disabled,true);}else{$(.rules_check_wrap ul li:eq(2)).removeClass();$(.rules_check_wrap ul li:eq(2)).addClass(rules_check_pass);}if((baohan.test(newpassword)) (newpassword.length 6 newpassword.length 18) !(/admin/.test(newpassword)) !(/\s/.test(newpassword))){$(input[namerepassword]).removeAttr(disabled);}//判断是否存在常见密码}else{$(ul li).removeClass();}}/scriptdiv stylepadding: 85px 104px;span idmodifypwddiv stylemargin:15px 0 8px 75px; 原密码input typepassword idoldsecpwd nameoldsecpwd classtxt size34/divdiv validpassword stylemargin-left:75px;margin-bottom:8px; class 新密码input typepassword idnewsecpwd namenewsecpwd classtxt size34 oninputonchangpwd() onpastereturn false;/divdiv stylemargin-left:75px;重输密码input typepassword idnewsecpwd2 namenewsecpwd2 classtxt size34 onpastereturn false;/div/spandiv classrules_check_relativediv classrules_check_wrapspan classrules_check_arrowspan classarrow_l/spanspan classarrow_r/span/spanh3密码需满足以下要求/h3ulli classspan classicon_rules_check/span同时包含大写字母、小写字母和数字/lili classspan classicon_rules_check/span密码长度为 6-18 个字符/lili classspan classicon_rules_check/span不包含帐户信息与空格/li!-- li classspan classicon_rules_check/span不是常见密码/li --/ul/div/div/div
/body
/html外加放在IMG文件夹下的三张图片
效果图
