前端需要随机密码生成,利用数字、大小写、特殊字符自动生成,纯JS实现,给公司做vue前端的同事参考使用的
<html>
<head>
<title>随机密码</title>
<style>
.hid {
display: none;
}
.org{
font-weight: normal;
color: #F7B500;
}
.red{
color:#da1318
}
.qgreen{
color:#8BC34A
}
.green{
color:#467a05
}
</style>
</head>
<body>
<div class="Box">
<label>密码长度:</label><input id="inum" type="number" value="10" />
</div>
<div class="Box">
<label>所含字符:</label>
<input type="checkbox" class="checkbox" data-text="number_array" name="checkText" checked="checked"><em class="strTxt">数字 0-9</em>
<input type="checkbox" class="checkbox" data-text="letter_lowercase_array" name="checkText" checked="checked"><em class="strTxt">小写字母 a-z</em>
<input type="checkbox" class="checkbox" data-text="letter_capital_array" name="checkText" checked="checked"><em class="strTxt">大写字母 A-Z</em>
<input type="checkbox" class="checkbox" data-text="special_char_array" name="checkText" checked="checked"><em class="strTxt">常用符号 ~!@#$%^&*()_+</em>
</div>
<button onclick="generate_pw()">生产密码</button>
<div class="Box">
<label>密码:</label><input id="newpw" type="text" />
<em id="msgColor" class="hid">(检测提示(1-4):<em id="msg">密码强度高</em>)</em>
</div>
</body>
<script type='text/javascript'>
function generate_pw(){
var pwdLen= document.getElementById("inum").value;
pwdLen=pwdLen?pwdLen:10;
var ElementCheckText=document.getElementsByName("checkText");
var isNumber= ElementCheckText[0].checked;
var isLowerCase= ElementCheckText[1].checked;
var isUpperCase= ElementCheckText[2].checked;
var isSpecialChars= ElementCheckText[3].checked;
var newpwd=getRandomPwd(pwdLen,isNumber,isLowerCase,isUpperCase,isSpecialChars);
document.getElementById("newpw").value=newpwd
var passwordStrong=validate(newpwd);
var ElementMsgColor = document.getElementById('msgColor');
var ElementMsg = document.getElementById('msg');
ElementMsgColor.setAttribute("class", "hid");
switch(passwordStrong){
case 1:
ElementMsgColor.setAttribute("class", "red");
ElementMsg.innerHTML='密码强度1:差';
break;
case 2:
ElementMsgColor.setAttribute("class", "org");
ElementMsg.innerHTML='密码强度2:良好';
break;
case 3:
ElementMsgColor.setAttribute("class", "qgreen");
ElementMsg.innerHTML='密码强度3:高';
break;
case 4:
ElementMsgColor.setAttribute("class", "green");
ElementMsg.innerHTML='密码强度4:强';
break;
}
}
function validate(sValue){
let passwordStrong = 0;
//正则表达式验证符合要求的
if (sValue.length < 1) return passwordStrong;
if (/\d/.test(sValue)) passwordStrong++; //数字
if (/[a-z]/.test(sValue)) passwordStrong++; //小写
if (/[A-Z]/.test(sValue)) passwordStrong++; //大写
if (/\W/.test(sValue)) passwordStrong++; //特殊字符
return passwordStrong
}
/*
获取随机密码
psdLen:密码长度
isNumber:是否包含字母
isLowerCase:是否包含小写
isUpperCase:是否包含大写
isSpecialChars:是否包含特殊字符
*/
function getRandomPwd(pwdLen,isNumber,isLowerCase,isUpperCase,isSpecialChars){
var number='1234567890';
var lowerCase='abcdefghijklmnopqrstuvwxyz';
var upperCase='ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var specialChars='~!@#$%^&*()_+';
var dictionary='';
if(isNumber)dictionary+=number;
if(isLowerCase)dictionary+=lowerCase;
if(isUpperCase)dictionary+=upperCase;
if(isSpecialChars)dictionary+=specialChars;
if(dictionary=='')return ''
let str = '';
for(let i=0;i<pwdLen;i++){
str += dictionary[parseInt(Math.random()*dictionary.length)]
}
return str
}
</script>
</html>