javascript - 所有 jquery 验证规则都正常工作(在 keyup 上工作)但仅在提交按钮上单击后才确认密码验证工作

Question

在注册表单上，所有 jquery 验证规则都正常工作(在 keyup 上工作)但只有在提交按钮上 onclick 后确认密码验证才有效

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

所有 jquery 验证规则都正常工作(在 keyup 上工作)但只有在提交按钮上 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'] 进行验证，这就是它没有反射(reflect)为的原因你想要的。

请看下面的演示。

$.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>