如何使用jquery验证密码和确认密码

时间:2017-11-23 06:37:55

标签: jquery

您好我必须验证密码并确认密码,我的约束是当我访问页面时确认密码文本框应该被禁用,

当我点击仅为密码字段提交所需消息时,它不应验证确认密码

当我在密码字段中输入正确的密码时,只启用确认密码字段

正确的密码意味着它应包含1个大写字母,1个小写字母,1个数字, 1个特殊字符

中的8个字符

输入确认密码后点击检查应验证两者是否相同

  <form id="formCheckPassword">
        <input type="password"  name="password" id="password"/>
        <p id="passerror"></p>    
        <br>
        <input type="password"  name="cfmPassword" id="cfmPassword" disabled /><br>
        <input type="submit" value="submit" id="s"/>
     </form>

Jquery的

  $(document).ready(function() {
                $("#s").click(function(event) {
          var passerror = "";
          var pass =  $.trim($("#password").val());
          if (pass == "") {
                        passerror = "pass is required";
                        $("#passerror").html(passerror);
                        $("#passerror").show();
                        event.preventDefault();
                    } 
            if(pass!= cfmPassword)
            {
             display error message

            }
            else
            {

            }
       });

      $("#password").focusout(function(){
          var pwd=$("#password").val();
                var errorMessage = "";
                    function isValidPassword(emailAddress) {
                      var pattern = new RegExp(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/);
                      return pattern.test(emailAddress);
                    };
                    if (!isValidPassword(pwd.val())) {
                      errorMessage = "<br />Please enter a valid email address";
                      $("#error").html(errorMessage);
                      $( "#error" ).show();
                      event.preventDefault();

                    }

        });     
            });

CSS

  #passerror{  
        color: red;
    }

任何人都可以更新代码

http://jsfiddle.net/BSdc8/285/

1 个答案:

答案 0 :(得分:0)

jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});

// function to validate first password

$.validator.addMethod("pwcheck", function(value) {
return /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/.test(value)
});

$( "#myform" ).validate({
  rules: {
     password:{
	required:true,
	minlength:8,
	pwcheck:true
	},
    password_again:{
	minlength:8,
	equalTo :'#Password'
	}
  }
});
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required to be the same as #other</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
 
</head>
<body>
<form id="myform">
<label for="password">Password</label>
<input id="password" name="password" />
<br/>
<label for="password_again">Again</label>
<input class="left" id="password_again" name="password_again" />
<br>
<input type="submit" value="Validate!">
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
</body>
</html>