密码强度检查
Posted hao-1234-1234
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了密码强度检查相关的知识，希望对你有一定的参考价值。
一、前端检查 案例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 密码强度检测 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> input{float: left; font-size: 14px; width: 250px; height: 25px; border: 1px solid #ccc; padding-left: 10px;} #tips{float: left; font-size: 12px; width: 400px; height: 25px; margin: 4px 0 0 20px;} #tips span{float: left; width: 40px; height: 20px; color: #fff; overflow:hidden; margin-right: 10px; background: #D7D9DD; line-height:20px; text-align: center; } #tips .s1{background: #F45A68;}/*红色*/ #tips .s2{background: #fc0;}/*橙色*/ #tips .s3{background: #cc0;}/*黄色*/ #tips .s4{background: #14B12F;}/*绿色*/ </style> </head> <body> <input type="text" id="password" value="" maxlength="16" /> <div id="tips"> <span>弱</span> <span>中</span> <span>强</span> <span>很强</span> </div> </body> <script type="text/javascript"> var password = document.getElementById("password"); //获取文本框的对象 //var value = password.value; //获取用户在文本框里面填写的值 //获取所有的span标签 返回值是一个数组 var spanDoms = document.getElementsByTagName("span"); password.onkeyup = function(){ //获取用户输入的密码,然后判断其强度 返回0 或者 1 2 3 4 var index = checkPassWord(this.value); for(var i = 0; i <spanDoms.length; i++){ spanDoms[i].className = "";//清空span标签所有的class样式 if(index){//0 代表false 其余代表true spanDoms[index-1].className = "s" + index ; } } } //校验密码强度 function checkPassWord(value){ // 0： 表示第一个级别 1：表示第二个级别 2：表示第三个级别 // 3： 表示第四个级别 4：表示第五个级别 var modes = 0; if(value.length < 6){//最初级别 return modes; } if(/d/.test(value)){//如果用户输入的密码 包含了数字 modes++; } if(/[a-z]/.test(value)){//如果用户输入的密码 包含了小写的a到z modes++; } if(/[A-Z]/.test(value)){//如果用户输入的密码 包含了大写的A到Z modes++; } if(/W/.test(value)){//如果是非数字 字母 下划线 modes++; } switch(modes){ case 1 : return 1; break; case 2 : return 2; break; case 3 : return 3; break; case 4 : return 4; break; } } </script> </html>
二、后端检查案例
https://blog.csdn.net/u010156024/article/details/45673581
三、vue专项检查案例
http://www.datouwang.com/jiaoben/973.html
主要代码：
/* DaTouWang URL: www.datouwang.com */
var app = new Vue({
el: "#app",
data: {
password: null,
password_length: 0,
typed: false,
contains_lovercase: false,
contains_number: false,
contains_uppercase: false,
valid_password_length: false,
valid_password: false
},
methods: {
p_len: function() {
this.password_length = this.password.length;
if (this.password_length > 7) {
this.valid_password_length = true;
} else {
this.valid_password_length = false;
}
if (this.password_length > 0) {
this.typed = true;
} else {
this.typed = false;
}
this.contains_lovercase = /[a-z]/.test(this.password);
this.contains_number = /d/.test(this.password);
this.contains_uppercase = /[A-Z]/.test(this.password);
// Check if the password is valid
if (this.contains_lovercase == true && this.contains_number == true) {
this.valid_password = false;
if (
this.contains_uppercase == true &&
this.valid_password_length == true
)
this.valid_password = true;
} else {
this.valid_password = false;
}
}
}
});
四、vue实际应用：
<style lang="css" scoped>
#tips{float: left; font-size: 12px; width: 400px; height: 25px; margin: 4px 0 0 20px;}
#tips span{float: left; width: 40px; height: 20px; color: #fff; overflow:hidden; margin-right: 10px; background: #D7D9DD; line-height:20px; text-align: center; }
#tips .s1{background: #F45A68;}/*红色*/
#tips .s2{background: #fc0;}/*橙色*/
#tips .s3{background: #cc0;}/*黄色*/
#tips .s4{background: #14B12F;}/*绿色*/
</style>
<template>
<div>
<!-- <sticky class-name="sub-navbar white">
<el-button style="margin:5px 10px;float:left" type="text" icon="el-icon-arrow-left" @click="handleReturn" >返回</el-button>
</sticky> -->
<div style="padding:20px 20px 20px 20px;width:500px;">
<div>
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="120px" size="small" >
<el-form-item label="用户名：" prop="UserName">
<span>{{ temp.UserName }}</span>
</el-form-item>
<el-form-item label="职位/职称：" prop="Position">
<el-input v-model="temp.Position" :maxlength="20" />
</el-form-item>
<el-form-item label="固定电话：" prop="TelPhone">
<el-input v-model="temp.TelPhone" :maxlength="20" />
</el-form-item>
<el-form-item label="手机：" prop="Phone">
<el-input v-model="temp.Phone" :maxlength="20"/>
</el-form-item>
<el-form-item label="邮件：" prop="Email">
<el-input v-model="temp.Email" :maxlength="50"/>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="dialogFormVisible = true">{{ someWord.changePassword }}</el-button>
<el-button type="primary" @click="submitForm()">保存</el-button>
</el-form-item>
</el-form>
</div>
</div>
<el-dialog :title="someWord.changePassword" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="400px">
<el-form ref="formPassword" :rules="formPasswordRules" :model="formPassword" label-position="right" label-width="100px" size="small" >
<el-form-item label="原密码：" prop="oldPassword">
<el-input v-model="formPassword.oldPassword" type="password" maxlength="16"/>
</el-form-item>
<el-form-item label="新密码：" prop="newPassword">
<el-input v-model="formPassword.newPassword" type="password" maxlength="16"/>
</el-form-item>
<el-form-item label="确认密码：" prop="newPassword2">
<el-input v-model="formPassword.newPassword2" type="password" maxlength="16"/>
</el-form-item>
<el-form-item label="密码强度：" prop="">
<div id="tips" ><span>低</span><span>中</span> <span>高</span><span>很高</span> </div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="formPasswordCancel()">取 消</el-button>
<el-button type="primary" @click="formPasswordUpdate()">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { update, getInfo, changePassword } from ‘@/api/account‘
import waves from ‘@/directive/waves‘ // 水波纹指令
import Sticky from ‘@/components/Sticky‘
import { checkPassWordStrength } from ‘@/utils‘
export default {
name: ‘SubjectReportDetail‘,
directives: {
waves
},
components: { Sticky },
props: {
id: {
type: Number,
default: 0
}
},
data() {
return {
spanDoms: null,
passWordStrength: ‘‘,
dialogFormVisible: false,
loading: false,
problemStatusOptions: [],
finalResultOptions: [],
subjectList: [],
subjectNameOptions: [],
chargeUserOptions: [],
someWord: {
changePassword: ‘修改密码‘
},
formPassword: {
oldPassword: ‘‘,
newPassword: ‘‘,
newPassword2: ‘‘
},
temp: {
UserID: undefined,
CompanyID: undefined,
Position: null,
UserName: null,
UserStatus: undefined,
Password: null,
RealName: null,
Email: null,
Phone: null,
TelPhone: null,
Address: null,
Photo: null,
InvestigatorID: undefined
},
rules: {
Email: [
{ required: true, message: ‘不能为空‘ },
{ type: ‘email‘, message: ‘邮箱格式不对‘ }
],
Phone: [
{ required: true, message: ‘不能为空‘ },
{ pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: ‘请输入11位手机号码‘ }
]
},
formPasswordRules: {
oldPassword: [
{ required: true, message: ‘不能为空！‘, trigger: ‘blur‘ }, { min: 6, max: 16, message: ‘请输入6到16字‘ }
],
newPassword: [
{ required: true, message: ‘不能为空！‘, trigger: ‘blur‘ }, { min: 6, max: 16, message: ‘请输入6到16字‘ }
],
newPassword2: [
{ required: true, message: ‘不能为空！‘, trigger: ‘blur‘ }, { min: 6, max: 16, message: ‘请输入6到16字‘ }
]
}
}
},
computed: { // Props，methods,data和computed的初始化都是在beforeCreated和created之间完成的。
},
watch: {
‘formPassword.newPassword‘(newValue, oldValue) {
this.passWordStrength = checkPassWordStrength(newValue)
},
‘passWordStrength‘(newValue, oldValue) {
// console.log(newValue, oldValue)
const index = newValue
if (index > 0) {
const spanDoms = document.getElementById(‘tips‘).getElementsByTagName(‘span‘)
for (let i = 0; i < spanDoms.length; i++) {
spanDoms[i].className = ‘‘// 清空span标签所有的class样式
if (index > 0) { // 0 代表false 其余代表true
spanDoms[index - 1].className = ‘s‘ + index
}
}
// console.log(‘spanDoms‘, spanDoms)
}
}
},
created() {
this.initInfo()
},
mounted() {
this.$nextTick(function() {
})
},
methods: {
formPasswordCancel() {
this.dialogFormVisible = false
this.$nextTick(() => {
this.$refs[‘formPassword‘].clearValidate()
})
},
submitForm() {
this.$refs[‘dataForm‘].validate((valid) => {
if (valid) {
update(this.temp).then((response) => {
if (response.data) {
const mydata = response.data
this.temp = mydata
this.$notify({
title: ‘成功‘,
message: ‘提交成功‘,
type: ‘success‘,
duration: 2000
})
}
}, error => {
this.responseError(error)
})
}
})
},
formPasswordUpdate() {
this.$refs[‘formPassword‘].validate((valid) => {
if (valid) {
if (this.passWordStrength < 2) {
this.$notify({
title: ‘警告‘,
message: ‘密码强度低，请加入大小写字母和特殊符号！‘,
type: ‘warning‘,
duration: 3000
})
return
}
if (this.formPassword.newPassword === this.formPassword.newPassword2) {
changePassword(this.formPassword.oldPassword, this.formPassword.newPassword).then((response) => {
if (response.success) {
this.$notify({
title: ‘成功‘,
message: ‘修改成功‘,
type: ‘success‘,
duration: 2000
})
this.dialogFormVisible = false
this.formPassword = {
oldPassword: ‘‘,
newPassword: ‘‘,
newPassword2: ‘‘
}
}
}, error => {
this.responseError(error)
})
} else {
this.$notify({
title: ‘警告‘,
message: ‘新密码与确认密码必须相同！‘,
type: ‘warning‘,
duration: 5000
})
}
}
})
},
resetTemp() {
this.temp = {
UserID: undefined,
CompanyID: undefined,
Position: null,
UserName: null,
UserStatus: undefined,
Password: null,
RealName: null,
Email: null,
Phone: null,
TelPhone: null,
Address: null,
Photo: null,
InvestigatorID: undefined
}
},
initInfo() {
getInfo().then(response => {
if (response.data) {
this.temp = response.data.user
}
}, error => {
this.responseError(error)
})
},
responseError(error) {
console.log(error)
this.loading = false
}
}
}
</script>
以上是关于密码强度检查的主要内容，如果未能解决你的问题，请参考以下文章