jquery密码输入强度实时检测提示代码

代码语言:html

所属分类:表单美化

代码描述:jquery密码输入强度实时检测提示代码

代码标签: jquery 密码 强度 实时 检测 提示 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
          text-align: center;
        }
        
        .form-container {
          display: block;
          width: 500px;
          margin: 60px auto;
          text-align: left;
        }
        
        lable {
          display: block;
          position: relative;
          text-transform: uppercase;
          color: #aaa;
        }
        
        input[type='password'] {
          width: 100%;
          box-sizing: border-box;
          height: 55px;
          display: inline-block;
          border: 3px solid #2F96EF;
          border-radius: 5px;
          padding: 0 15px;
          margin: 10px 0;
          -webkit-transition: .2s;
          transition: .2s;
        }
        
        input[type='password']:focus {
          outline: none;
           -moz-outline: none;
           -webkit-outline: none;
        }
        
        lable:before {
          content: "\f070";
          color: #aaa;
          font-size: 22px;
          font-family: FontAwesome;
          position: absolute;
          right: 25px;
          top: 44px;
        }
        
        .progress-bar_wrap {
          width: 300px;
          height: 5px;
          background: #F6F6FA;
          display: inline-block;
          vertical-align: middle;
          overflow: hidden;
          border-radius: 5px;
        }
        
        
        
        .form-1 .progress-bar_item {
          display: inline-block;
          height: 100%;
          width: .........完整代码请登录后点击上方下载按钮下载查看

网友评论0