所有jquery验证规则均正常工作（在onkeyup上有效），但仅在onclick提交按钮之后才确认密码验证在工作

Question

在注册表单上，所有jquery验证规则均正常运行（工作onkeyup），但仅在onclick提交按钮之后才确认密码验证有效

确认密码也应该在onkeyup起作用，但不会像其他字段那样发生

所有jquery验证规则均正常工作（在onkeyup上有效），但仅在onclick提交按钮之后才确认密码验证在工作

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>    
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>

<script>

  $(document).ready(function () {

    $('#signup').validate({

        rules: {
            "first_name": {
              required: {
                    depends:function(){
                        $(this).val($.trim($(this).val()));
                        return true;
                    }
              }
            },
            "last_name": {
              required: {
                    depends:function(){
                        $(this).val($.trim($(this).val()));
                        return true;
                    }
              }
            },
            "mobile_no": {
              required: {
                    depends:function(){
                        $(this).val($.trim($(this).val()));
                        return true;
                    }
              },
              minlength: 10,
              maxlength: 10,
              digits: true
            },
            "email": {
              required: {
                    depends:function(){
                        $(this).val($.trim($(this).val()));
                        return true;
                    }
              },
              email: true
            },
            "password": { 
              required: true,
              minlength: 4,
              maxlength: 4,
              digits: true
            },
            "conf_password": {
              required: true,
              equalTo: "#mainpassword"
            }
        },
        messages: {
            "first_name": {
              required: "First Name is required"
            },
            "last_name": {
              required: "Last Name is required"
            },
            "mobile_no": {
              required: "Mobile No is required",
              minlength: "Mobile No should be a 10-digit number",
              maxlength: "Mobile No should be a 10-digit number",
              digits: "Mobile No should contain only numbers"
            },
            "email": {
              required: "Email is required",
              email: "Invalid email Id"
            },
            "password": {
              required: "Password is required",
              minlength: "Password should be a 4-digit number",
              maxlength: "Password should be a 4-digit number",
              digits: "Password should contain only numbers"
            },
            "conf_password": {
              required: "Confirm Password is required",
              equalTo: "Password mismatch"
            }
        }
    });
  });
</script>

HTML代码的一部分：

 ....
    ....
    <div class="form-group">
        <label for="password" class="col-sm-4 control-label">Password :</label>
            <div class="col-sm-8">
                    <input type="password" class="form-control" name="password" id="mainpassword" placeholder="Enter Password" value="<?=set_value('password')?>">
            </div>
        </div>

        <div class="form-group">
                <label for="conf_password" class="col-sm-4 control-label">Confirm Password :</label>
                    <div class="col-sm-8">
                            <input type="Password" class="form-control" name="conf_password" id="conf_password" placeholder="Confirm Password" value="<?=set_value('conf_password')?>">
                    </div>
        </div>
    ....
    ....

谢谢，

Answer 1

您在这方面有问题，

<input type="Password" class="form-control" name="conf_password" id="conf_password"  
 placeholder="Confirm Password" value="<?=set_value('conf_password')?>">

更改为

<input type="password" class="form-control" name="conf_password" 
id="conf_password" placeholder="Confirm Password" value="<?=set_value('conf_password')?>">

如果您发现困扰您的Password类型存在问题，请将其更改为password 。 它会工作。

在jqueryvalidation库中，它使用[type='password']而不是[type='Password'] ，这就是它没有按照您的要求进行反映的原因。

同样，请参见下面的演示。

 $.validator.setDefaults({ submitHandler: function() { alert("submitted!"); } }); $().ready(function() { // validate the comment form when it is submitted // validate signup form on keyup and submit $("#signup").validate({ rules: { password: { required: true, minlength: 4, maxlength: 4, digits: true }, conf_password: { required: true, equalTo: "#mainpassword" }, }, messages: { password: { required: "Password is required", minlength: "Password should be a 4-digit number", maxlength: "Password should be a 4-digit number", digits: "Password should contain only numbers" }, conf_password: { required: "Confirm Password is required", equalTo: "Password mismatch" }, } }); // propose username by combining first- and lastname }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://jqueryvalidation.org/files/dist/jquery.validate.js"></script> <form class="cmxform" id="signup" name="signup" method="get" action=""> <fieldset> <div class="form-group"> <label for="password" class="col-sm-4 control-label">Password :</label> <div class="col-sm-8"> <input type="password" class="form-control" name="password" id="mainpassword" placeholder="Enter Password" value=""> </div> </div> <div class="form-group"> <label for="conf_password" class="col-sm-4 control-label">Confirm Password :</label> <div class="col-sm-8"> <input type="password" class="form-control" name="conf_password" id="conf_password" placeholder="Confirm Password" value=""> </div> </div> <p> <input class="submit" type="submit" value="Submit"> </p> </fieldset> </form>