Vue检测密码强度大小写字母和纯数字

一款简单实用的输入框检测大小写字母和纯数字的插件，之前有介绍过的就是Vue，这次是用来检测输入框里输入的密码强度，分别判断是否输入小写字母、纯数字和大写字母，并显示输入的密码位数，条件都满足时显示正确的对勾符号，是不是很棒呢！

分类：表单代码 > 输入框难易：入门级

查看演示下载资源下载积分： 30 积分

页面开头引入两个CSS样式normalize.min.css和style.css，主要在style.css里面调整字体、颜色等样式：

<link type="text/css" rel="stylesheet" href="css/normalize.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">

body里面要先写好输入框等才能引入javascript插件，代码如下：

<div id="app">
    <h2>Vue检测密码强度：<br>大小写字母和纯数字</h2>
    <div class="input_container">
	    <input type="password" @input="p_len" v-model="password" placeholder="请输入大小写字母和纯数字" />
	    <span v-bind:class="{ valid_password_length: valid_password_length , show_password_length: typed}" class="password_length">{{password_length}}</span>
    </div>
    <div class="lnu_container">
	    <p v-bind:class="{ lovercase_valid: contains_lovercase }">小写字母</p>
	    <p v-bind:class="{ number_valid: contains_number }">纯数字</p>
	    <p v-bind:class="{ uppercase_valid: contains_uppercase }">大写字母</p>
    </div>
    <div class="valid_password_container" v-bind:class="{show_valid_password_container : valid_password }">
	    <svg width="100%" height="100%" viewBox="0 0 140 100">
	    	<path class="tick" v-bind:class="{checked: valid_password }" 
	          d="M10,50 l25,40 l95,-70" />
	    </svg>
    </div>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>