JS正则表达式验证密码强度

网络编程 2024/11/15 佚名

3 2 1

本文实例为大家分享了JS正则表达式验证密码强度的具体代码，供大家参考，具体内容如下

代码1：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<style type="text/css">
 #dv{
  width: 300px;
  height:200px;
  position: absolute;
  left:300px;
  top:100px;
 }
 .strengthLv0 {
  height: 6px;
  width: 120px;
  border: 1px solid #ccc;
  padding: 2px;
 }
 
 .strengthLv1 {
  background: red;
  height: 6px;
  width: 40px;
  border: 1px solid #ccc;
  padding: 2px;
 }
 
 .strengthLv2 {
  background: orange;
  height: 6px;
  width: 80px;
  border: 1px solid #ccc;
  padding: 2px;
 }
 
 .strengthLv3 {
  background: green;
  height: 6px;
  width: 120px;
  border: 1px solid #ccc;
  padding: 2px;
 }
</style>
<body>
<div id="dv">
 <label for="pwd">密码</label>
 <input type="text" id="pwd" maxlength="16"><!--课外话题-->
 <div>
  <em>密码强度：</em>
  <em id="strength"></em>
  <div id="strengthLevel" class="strengthLv0"></div>
 </div>
</div>
<script src="/UploadFiles/2021-04-02/common.js">

优化代码2：


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<style type="text/css">
 #dv{
  width: 300px;
  height:200px;
  position: absolute;
  left:300px;
  top:100px;
 }
 .strengthLv0 {
  height: 6px;
  width: 120px;
  border: 1px solid #ccc;
  padding: 2px;
 }
 
 .strengthLv1 {
  background: red;
  height: 6px;
  width: 40px;
  border: 1px solid #ccc;
  padding: 2px;
 }
 
 .strengthLv2 {
  background: orange;
  height: 6px;
  width: 80px;
  border: 1px solid #ccc;
  padding: 2px;
 }
 
 .strengthLv3 {
  background: green;
  height: 6px;
  width: 120px;
  border: 1px solid #ccc;
  padding: 2px;
 }
</style>
<body>
<div id="dv">
 <label for="pwd">密码</label>
 <input type="text" id="pwd" maxlength="16"><!--课外话题-->
 <div>
  <em>密码强度：</em>
  <em id="strength"></em>
  <div id="strengthLevel" class="strengthLv0"></div>
 </div>
</div>
<script src="/UploadFiles/2021-04-02/common.js">

/**
 * 获取指定标签对象
 * @param id 标签的id属性值
 * @returns {Element}根据id属性值返回指定标签对象
 */
function my$(id) {
 return document.getElementById(id);
}


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js验证密码强度,js正则验证密码强度,js验证密码

标签：