add scPasswordStrength 密码强度检测

src/components/scPasswordStrength/index.vue

@@ -0,0 +1,92 @@
+<!--
+ * @Descripttion: 密码强度检测
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2022年6月2日15:36:01
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="sc-password-strength">
+		<div class="sc-password-strength-bar" :class="`sc-password-strength-level-${level}`"></div>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			modelValue: { type: String, default: "" },
+		},
+		data() {
+			return {
+				level: 0
+			}
+		},
+		watch: {
+			modelValue() {
+				this.strength(this.modelValue)
+			}
+		},
+		mounted() {
+			this.strength(this.modelValue)
+		},
+		methods: {
+			strength(v){
+				var _level = 0
+				//长度
+				var has_length = v.length >= 6
+				//包含数字
+				var has_number = /\d/.test(v)
+				//包含小写英文
+				var has_lovercase = /[a-z]/.test(v)
+				//包含大写英文
+				var has_uppercase = /[A-Z]/.test(v)
+				//没有连续的字符3位
+				var no_continuity = !/(\w)\1{2}/.test(v)
+				//包含特殊字符
+				var has_special = /[`~!@#$%^&*()_+<>?:"{},./;'[\]]/.test(v)
+
+				if(v.length <= 0){
+					_level = 0
+					this.level = _level
+					return false
+				}
+				if(!has_length){
+					_level = 1
+					this.level = _level
+					return false
+				}
+				if(has_number){
+					_level += 1
+				}
+				if(has_lovercase){
+					_level += 1
+				}
+				if(has_uppercase){
+					_level += 1
+				}
+				if(no_continuity){
+					_level += 1
+				}
+				if(has_special){
+					_level += 1
+				}
+				this.level = _level
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-password-strength {height: 5px;width: 100%;background: var(--el-color-info-light-5);border-radius: 5px;position: relative;margin:10px 0;}
+	.sc-password-strength:before {left: 20%;}
+	.sc-password-strength:after {right: 20%;}
+	.sc-password-strength:before, .sc-password-strength:after {position: absolute;content: "";display: block;width: 20%;height: inherit;border: 5px solid var(--el-bg-color-overlay);border-top: 0;border-bottom: 0;z-index: 1;background-color: transparent;box-sizing: border-box;}
+	.sc-password-strength-bar {position: absolute;height: inherit;width: 0%;border-radius: inherit;transition: width .5s ease-in-out,background .25s;background: transparent;}
+	.sc-password-strength-level-1 {width: 20%;background-color: var(--el-color-error);}
+	.sc-password-strength-level-2 {width: 40%;background-color: var(--el-color-error);}
+	.sc-password-strength-level-3 {width: 60%;background-color: var(--el-color-warning);}
+	.sc-password-strength-level-4 {width: 80%;background-color: var(--el-color-success);}
+	.sc-password-strength-level-5 {width: 100%;background-color: var(--el-color-success);}
+</style>

src/views/login/userRegister.vue

@@ -12,6 +12,7 @@
 			</el-form-item>
 			<el-form-item label="登录密码" prop="password">
 				<el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码"></el-input>
+				<sc-password-strength v-model="form.password"></sc-password-strength>
 				<div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
 			</el-form-item>
 			<el-form-item label="确认密码" prop="password2">
@@ -65,11 +66,13 @@
 </template>
 
 <script>
+	import scPasswordStrength from '@/components/scPasswordStrength';
 	import commonPage from './components/commonPage'
 
 	export default {
 		components: {
-			commonPage
+			commonPage,
+			scPasswordStrength
 		},
 		data() {
 			return {