密码强度demo(vue实现)

图片示例
在这里插入图片描述
在这里插入图片描述
html

<template>
	<div>
		<label style='margin-left:40px;'>密码:</label>
		<input v-model="pwd" id='inputValue' auto-complete="off"></input>
		<br></br>
		<div class='input_span'>
			<label style='margin-left:40px;'>强度:</label>
			<span id="one"></span>
			<span id="two"></span>
			<span id="three"></span>
		</div>
		<div id="font">
				<span>弱</span>
				<span>中</span>
				<span>强</span>
		</div>
	</div>
</template>

script

<script>
	export function checkStrong(sValue) {
		var modes = 0;
		//正则表达式验证符合要求的
		if(sValue.length < 1) return modes;
		if(/\d/.test(sValue)) modes++; //数字
		if(/[a-z]/.test(sValue)) modes++; //小写
		if(/[A-Z]/.test(sValue)) modes++; //大写  
		if(/\W/.test(sValue)) modes++; //特殊字符

		//逻辑处理
		switch(modes) {
			case 1:
				return 1;
				break;
			case 2:
				return 2;
				break;
			case 3:
			case 4:
				return sValue.length < 10 ? 3 : 4
				break;
		}
		return modes;
	}
	export default {
		data() {
			return {
				msgText: '',
				pwd: '',
			}
		},
		methods: {
		},
		watch: {
			pwd(newValue, oldValue) {
				this.msgText = checkStrong(newValue);
				if(this.msgText > 1 || this.msgText == 1) {
					$("#one").css("background", "red");
				} else {
					$("#one").css("background", "#eee");
				}
				if(this.msgText > 2 || this.msgText == 2) {
					$("#two").css("background", "orange");
				} else {
					$("#two").css("background", "#eee");
				}
				if(this.msgText == 4) {
					$("#three").css("background", "#00D1B2");
				} else {
					$("#three").css("background", "#eee");
				}
			}
		},
	}
</script>

css

<style scoped>
	#inputValue{
		width:240px;
		margin-left: 20px;
		padding-left: 10px;
		border-radius: 3px;
	}
	.input_span span {
		display: inline-block;
		width: 85px;
		height: 10px;
		background: #eee;
		line-height: 20px;
	}
	
	#one {
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		border-right: 0px solid;
		margin-left: 20px;
		margin-right: 3px;
	}
	
	#two {
		border-left: 0px solid;
		border-right: 0px solid;
		margin-left: -5px;
		margin-right: 3px;
	}
	
	#three {
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		border-left: 0px solid;
		margin-left: -5px;
	}
	#font span:nth-child(1){
		color:red;
		margin-left: 80px;
	}
	#font span:nth-child(2){
		color:orange;
		margin: 0 60px;
	}
	#font span:nth-child(3){
		color:#00D1B2;
	}
</style>
  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现Vue实现Twitter登录Demo,我们需要遵循以下步骤: 1. 首先,我们需要创建一个Vue项目,并安装Vue Router和Axios插件。我们可以使用Vue CLI来创建项目,并使用命令`vue create twitter-login-demo`进行初始化。 2. 在Vue项目的`src`目录下创建一个`components`文件夹,并在其中创建一个名为`Login.vue`的组件。在这个组件中,我们将创建一个按钮,当用户点击按钮时,将会触发Twitter登录的操作。 3. 在`Login.vue`组件中,我们需要导入所需的Vue插件。我们需要导入Vue Router和Axios,并在组件的`methods`属性中创建一个`login`方法。 4. 在`login`方法中,我们将使用Axios发送一个GET请求到Twitter的登录接口。我们可以使用Twitter提供的开发者文档来获取登录接口的详细信息。 5. 当我们收到来自Twitter的响应后,我们可以根据响应的内容来处理用户的登录状态。例如,如果响应中有一个`access_token`字段,我们可以将其保存在`localStorage`中,以便在其他组件中使用。 6. 同时,我们可以通过Vue Router将用户重定向到我们指定的页面,例如用户登录成功后重定向到主页。 7. 最后,在Vue的主页面中,我们可以使用`<router-view></router-view>`标签来显示各个组件。在这个例子中,我们需要将`Login.vue`组件添加到主页面的路由中。 通过以上步骤,我们就可以实现一个基本的Vue Twitter登录Demo。需要注意的是,由于Twitter的登录接口需要进行身份验证和授权,我们在实际开发中可能需要额外的配置和处理来确保登录的安全性和正确性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值