jquery.validate表单验证密码完整例子(带密码强度显示）

最新推荐文章于 2023-08-11 16:30:25 发布

ybcwjj

最新推荐文章于 2023-08-11 16:30:25 发布

阅读量6k

点赞数 1

分类专栏： jquery

本文链接：https://blog.csdn.net/yinbaicheng/article/details/83025970

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

运行结果图：

相关代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="jquery.min.js"></script>
<script src="jquery.validate.min.js"></script>
<script src="messages_zh.min.js"></script>
<style>
.tbl-txt{font-size:14px;}
        .tbl-txt input{padding:0 5px; height:22px; line-height:22px; margin-bottom:6px;}
        .pw-strength {clear: both;position: relative;top: 8px;width: 180px;}
        .pw-bar{background: url(images/pwd-1.png) no-repeat; position:relative; top:1px;height: 14px;overflow: hidden;width: 179px;}
        .pw-bar-on{background:  url(images/pwd-2.png) no-repeat; width:0px; height:14px;position: absolute;top: 1px;left: 2px;transition: width .5s ease-in;-moz-transition: width .5s ease-in;-webkit-transition: width .5s ease-in;-o-transition: width .5s ease-in;}
        .pw-weak .pw-defule{ width:0px;}
        .pw-weak .pw-bar-on {width: 60px;}
        .pw-medium .pw-bar-on {width: 120px;}
        .pw-strong .pw-bar-on {width: 179px;}
        .pw-txt {padding-top: 2px;width: 180px;overflow: hidden;}
        .pw-txt span {color: #707070;float: left;font-size: 12px;text-align: center;width: 58px;}

</style>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
   $('#password').keyup(function () { 
        var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); 
        var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); 
        var enoughRegex = new RegExp("(?=.{6,}).*", "g"); 
    
        if (false == enoughRegex.test($(this).val())) { 
            $('#level').removeClass('pw-weak'); 
            $('#level').removeClass('pw-medium'); 
            $('#level').removeClass('pw-strong'); 
            $('#level').addClass('pw-defule'); 
             //密码小于六位的时候，密码强度图片都为灰色 
        } 
        else if (strongRegex.test($(this).val())) { 
            $('#level').removeClass('pw-weak'); 
            $('#level').removeClass('pw-medium'); 
            $('#level').removeClass('pw-strong'); 
            $('#level').addClass('pw-strong'); 
             //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强 
        } 
        else if (mediumRegex.test($(this).val())) { 
            $('#level').removeClass('pw-weak'); 
            $('#level').removeClass('pw-medium'); 
            $('#level').removeClass('pw-strong'); 
            $('#level').addClass('pw-medium'); 
             //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等 
        } 
        else { 
            $('#level').removeClass('pw-weak'); 
            $('#level').removeClass('pw-medium'); 
            $('#level').removeClass('pw-strong'); 
            $('#level').addClass('pw-weak'); 
             //如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的 
        } 
        return true; 
    }); 
	// 自定义校验规则
   $.validator.addMethod("passwordCheck",function(value, element){  
        var returnVal = false;  
        var chrnum = /^[0-9]*$/;
        return this.optional(element) || (chrnum.test(value));
   },"必须填入数字");  

// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
	    rules: {
	    
	      username: {
	        required: true,
	        minlength: 2
	      },
	      password: {
	        required: true,
			passwordCheck:true,
	        minlength: 5
	      },
	      confirm_password: {
	        required: true,
	        minlength: 5,
	        equalTo: "#password"
	      } 
	    },
	    messages: {
	    
	      username: {
	        required: "请输入用户名",
	        minlength: "用户名必需由两个字母组成"
	      },
	      password: {
	        required: "请输入密码",
	        minlength: "密码长度不能小于 5 个字母"
	      },
	      confirm_password: {
	        required: "请输入密码",
	        minlength: "密码长度不能小于 5 个字母",
	        equalTo: "两次密码输入不一致"
	      } 
	    }
	});
});
</script>
<style>
.error{
	color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>表单</legend>
   
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" name="password" type="password">
    </p>
	 
       <p>
	    
        <div id="level" class="pw-strength">         
            <div class="pw-bar"></div>
            <div class="pw-bar-on"></div>
            <div class="pw-txt">
            <span>弱</span>
            <span>中</span>
            <span>强</span>
            </div>
        </div>   
       </p>
    <p>
      <label for="confirm_password">验证密码</label>
      <input id="confirm_password" name="confirm_password" type="password">
    </p>
   
   
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>
</body>
</html>

完整包可以从 https://download.csdn.net/download/yinbaicheng/10716020 地址下载。

ybcwjj

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery.validate表单验证密码完整例子(带密码强度显示）

运行结果图：相关代码如下： &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;test&lt;/title&gt;&lt;script src="jquery.min.js"&gt;&lt;/script&
复制链接

扫一扫