JQ技术实现注册页面带有校验密码强度

2024-05-06 16:23:50

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了JQ技术实现注册页面带有校验密码强度,需要的朋友可以参考下

主要介绍使用jQuery实现带有校验密码强度的注册页面，当然要想生成一个漂亮的带有密码强度检验的注册页面要有相关插件和类库配合，具体内容如下：

相关的插件和类库

complexify - 一个密码强度检验jQuery插件
justgage - 一个兼容性良好的仪表盘类库
主要功能

注册中包含一个密码强度检验组件，用户需要设置一定强度的密码才可以注册
密码强度使用仪表盘类库justgage来显示，不同的强度的密码将显示不同的颜色
密码强度符合要求后，显示注册按钮
代码说明

<div id="page-wrap">

<div id="title">注册新账号 - gbtags.com</div>

<p>

<input type="text" name="email" id="email" placeholder="电子邮件"/>

</p>

<p>

<input type="password" name="password" id="password" placeholder="输入密码"/>

</p>

<div id="complexity"></div>

<p>

<input type="button" name="submit" id="submit" value="注册" />

</p>

<p id="msgbox"></p>

</div>

添加电子邮件和密码输入框，及其密码强度组件。

Javascript：

导入所需的类库，包括：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.complexify.js"></script>
<script src="js/jquery.placeholder.min.js"></script>
<script src="js/raphael.2.1.0.min.js"></script>
<script src="js/justgage.1.0.1.min.js"></script>

以下为生成仪表盘及其密码强度代码：

上一篇：在for循环中length值是否需要缓存

下一篇：jquery实现TAB选项卡鼠标经过带延迟效果的方法