您的位置:首页 - 教程 - 网页特效 - 正文
vue.js表单密码强度验证
效果体验:
http://hovertree.com/texiao/vue/1/

代码如下:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>vue.js表单密码强度验证代码 - 何问起</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://hovertree.com/texiao/vue/1/css/normalize.min.css">
<link rel="stylesheet" href="http://hovertree.com/texiao/vue/1/css/style.css">

</head>

<body>

<div id="app">
<h2>html5密码强度显示</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 src="http://hovertree.com/texiao/vue/1/js/vue.min.js"></script>
<script src="http://hovertree.com/texiao/vue/1/js/index.js"></script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源:<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/h/bjag/dn9q6gy3.htm" target="_blank">源码</a></p>
</div>
</body>
</html>

评论: