JS验证密码强度

 

CSS代码

<style type="text/css">
.pwd-strength
{width:180px;height:20px;line-height:20px}
.pwd-strength-box,.pwd-strength-box-low,.pwd-strength-box-med,.pwd-strength-box-hi
{color: #464646;text-align: center;
width
: 30%; float:left; border:solid 1px #CCCCCC}
.pwd-strength-box-low
{color: #FF0000;background-color:#F00F00;color:#FFFFFF}
.pwd-strength-box-med
{color: #FF0000;background-color: #CCCCCC;}
.pwd-strength-box-hi
{color: #FF0000;background-color: #FF9900;}
</style>

Html代码

<table width="390" border="0" cellspacing="0" cellpadding="0" class="bgFormStyle_l">
<tr>
<td width="63" height="29" align="center" class="c_999"><span class="p_l5">重复密码</span></td>
<td><input type="password" id="NewPass" name="NewPass" class="input310" maxlength="20" onKeyUp="checkPassword(this.value);"></td>
<td width="5" height="29" class="bgFormStyle_r"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="12" valign="top">
<div class="pwd-strength FCK__ShowTableBorders" style="display:none;">
<div class="pwd-strength-box" id="pwdLow4"></div>
<div class="pwd-strength-box" id="pwdMed4"></div>
<div class="pwd-strength-box" id="pwdHi4"></div>
</div>
</td>
</tr>
</table>



JS代码:

<script language="javascript" type="text/javascript">
function CheckForm()
{
if ($("#UserPass").val()=="")
{
alert("\u5f53\u524d\u767b\u5f55\u5bc6\u7801\u4e0d\u80fd\u4e3a\u7a7a\u3002");
$("#UserPass").focus();
return false;
}
if ($("#NewPass").val()=="")
{
alert("\u65b0\u7684\u767b\u5f55\u5bc6\u7801\u4e0d\u80fd\u4e3a\u7a7a\u3002");
$("#NewPass").focus();
return false;
}
if ($("#NewPass1").val()=="")
{
alert("\u8bf7\u518d\u6b21\u8f93\u5165\u65b0\u7684\u767b\u5f55\u5bc6\u7801\u3002");
$("#NewPass1").focus();
return false;
}
if ($("#NewPass").val()!=$("#NewPass1").val())
{
alert("\u4e24\u6b21\u5bc6\u7801\u8f93\u5165\u4e0d\u4e00\u81f4\u3002");
$("NewPass1").focus();
return false;
}
return true;
}
</script>

 

 

转载于:https://www.cnblogs.com/Sue_/articles/2212159.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 是一个用于构建交互式 Web 界面的渐进式 JavaScript 框架。如果你想要在 Vue.js 中实现密码强度验证,可以使用一个密码强度评估库来计算密码的强度,并使用 Vue.js 来更新界面。 一个流行的密码强度评估库是 zxcvbn,它可以计算密码的熵值,并根据熵值给出密码的强度评分。你可以使用 npm 安装 zxcvbn: ``` npm install zxcvbn ``` 在 Vue.js 中,你可以在模板中使用 `v-model` 绑定输入框中的密码,并使用 `watch` 监听密码的变化。当密码发生变化时,你可以使用 zxcvbn 计算密码的强度,并更新界面。 下面是一个简单的 Vue.js 组件示例,用于实现密码强度验证: ```html <template> <div> <label>Password:</label> <input type="password" v-model="password"> <p v-if="passwordStrength.score >= 0"> Password strength: {{ passwordStrength.score }} ({{ passwordStrength.feedback.warning }}) </p> </div> </template> <script> import zxcvbn from 'zxcvbn'; export default { data() { return { password: '', passwordStrength: { score: -1, feedback: {} } }; }, watch: { password: function() { this.passwordStrength = zxcvbn(this.password); } } }; </script> ``` 在这个示例中,我们在模板中使用 `v-model` 绑定输入框中的密码,并在 `watch` 中监听密码的变化。当密码发生变化时,我们使用 zxcvbn 计算密码的强度,并将结果存储在 `passwordStrength` 对象中。然后,我们在模板中使用 `v-if` 来显示密码强度评分和反馈。 注意,这个示例并没有实现密码强度要求的验证逻辑。如果你需要在密码不符合要求时显示错误消息,你可以添加一些额外的代码来实现这个逻辑。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值