在不同情況下使用 jQuery 驗證添加密碼驗證

Question

到目前為止，我設法為密碼字段創建了 jQuery 驗證。 我的問題是我如何編輯它以在每個自定義案例中獲得錯誤警報，例如“您需要添加大寫字母”、“您需要添加一個數字”等。我的代碼：

var value=$("#password_reg").val();

$.validator.addMethod("pwcheck",function(value) {
     return /^[A-Za-z0-9\d=!\-@._*]*$/.test(value) && /[a-z]/.test(value) && /\d/.test(value) && /[A-Z]/.test(value);
});

$('#signup-form').validate({    
    rules: {
        password:{
            minlength: 6,
            maxlength: 30,
            required: true,
            pwcheck: true   
        },
        confirmPassword:{
            equalTo: "#password_reg",
        },
    },
    messages: {
       password: {
           pwcheck: "Password is not strong enough"
       }     
    },
    highlight: function(element) {
        var id_attr = "#" + $( element ).attr("id") + "1";
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        $(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove');  
        $('.form-group').css('margin-bottom', '5px');
        $('.form').css('padding', '30px 40px');
        $('.tab-group').css('margin', '0 0 25px 0');
        $('.help-block').css('display', '');
    },
    unhighlight: function(element) {
        var id_attr = "#" + $( element ).attr("id") + "1";
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        $(id_attr).removeClass('glyphicon-remove').addClass('glyphicon-ok');         
    },
    errorElement: 'span',
        errorClass: 'validate_cus',
        errorPlacement: function(error, element) {
            x=element.length;
            if(element.length) {
                error.insertAfter(element);
            } else {
            error.insertAfter(element);
            }
        }
 });

請檢查我的小提琴

Answer 1

您需要將pwcheck的邏輯划分為單獨的驗證器方法。 下面是相同的原型：

 var value = $("#password_reg").val(); $.validator.addMethod("checklower", function(value) { return /[az]/.test(value); }); $.validator.addMethod("checkupper", function(value) { return /[AZ]/.test(value); }); $.validator.addMethod("checkdigit", function(value) { return /[0-9]/.test(value); }); $.validator.addMethod("pwcheck", function(value) { return /^[A-Za-z0-9\\d=!\\-@._*]*$/.test(value) && /[az]/.test(value) && /\\d/.test(value) && /[AZ]/.test(value); }); $('#signup-form').validate({ rules: { password: { minlength: 6, maxlength: 30, required: true, //pwcheck: true, checklower: true, checkupper: true, checkdigit: true }, confirmPassword: { equalTo: "#passwd_reg", }, }, messages: { password: { pwcheck: "Password is not strong enough", checklower: "Need atleast 1 lowercase alphabet", checkupper: "Need atleast 1 uppercase alphabet", checkdigit: "Need atleast 1 digit" } }, highlight: function(element) { var id_attr = "#" + $(element).attr("id") + "1"; $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); $(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove'); $('.form-group').css('margin-bottom', '5px'); $('.form').css('padding', '30px 40px'); $('.tab-group').css('margin', '0 0 25px 0'); $('.help-block').css('display', ''); }, unhighlight: function(element) { var id_attr = "#" + $(element).attr("id") + "1"; $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); $(id_attr).removeClass('glyphicon-remove').addClass('glyphicon-ok'); $('#confirmPassword').attr('disabled', false); }, errorElement: 'span', errorClass: 'validate_cus', errorPlacement: function(error, element) { x = element.length; if (element.length) { error.insertAfter(element); } else { error.insertAfter(element); } } });

 .has-feedback .form-control-feedback { top: 33px; } .validate_cus { color: #a94442; font-size: small; } label { display: inline-block; margin-bottom: 5px; font-weight: 700; } .top-row > div { float: left; width: 48%; margin-right: 4%; } .field-wrap { position: relative; margin-bottom: 20px; } input, textarea { font-size: 18px; display: block; height: 100%; width: 100%; padding: 5px 10px; background: none; background-image: none; border: 1px solid #a0b3b0; color: #545f58; border-radius: 6px; -webkit-transition: border-color .25s ease, box-shadow .25s ease; transition: border-color .25s ease, box-shadow .25s ease; } input:disabled { background: #eee; } .button:hover, .button:focus { background: #0b9444; } .button-block { display: block; width: 50%; } .button { border: 0; outline: none; border-radius: 20px; padding: 15px 0; font-size: 1.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; background: #187143; color: #ffffff; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-appearance: none; } #signup-form { padding: 30px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script> <form id="signup-form" action="login" method="post"> <div class="top-row"> <div class="form-group has-feedback field-wrap"> <label id="lbl_paswd" class="control-label" for="password"> Password <span class="req">* </span> </label> <input type="password" name="password" id="password_reg" class="" required autocomplete="off" /> <span class="glyphicon form-control-feedback" id="password_reg1"> </span> </div> <div class="form-group has-feedback field-wrap"> <label class="control-label" for="confirmPassword"> Confirm Password <span class="req">* </span> </label> <input type="password" name="confirmPassword" id="confirmPassword" class="" disabled required autocomplete="off" /> <span class="glyphicon form-control-feedback" id="confirmPassword1"> </span> </div> </div> <button type="submit" class="button button-block">SIGN UP </button> </form>

Answer 2

代碼：

    $.validator.addMethod("strongePassword", function(value) {
        return /^[A-Za-z0-9\d=!\-@._*]*$/.test(value) && /[a-z]/.test(value) && /\d/.test(value) && /[A-Z]/.test(value);
    },"The password must contain at least 1 number, at least 1 lower case letter, and at least 1 upper case letter"); 
        

用於：

  rules: { 
        password: {
                    required: !0,
                    strongePassword: true
                 },
     }

這對我有用。