在通过 ajax 保存之前检查字符长度

Question

我在使用表单标签保存之前使用模式来检查字符长度

pattern=".{6,}" oninvalid="this.setCustomValidity('Password must be 6 atleast characters')" 

但是当我使用 ajax/jquery 保存时这不起作用。它直接保存文本而不检查字符长度/模式

这是我的表单和 ajax/jquery（它在模式中）

<div style="text-align:center;">
                          <div style="display:inline-block">
                               <input type="password" id="password" class="my-2 form-control"  
placeholder="Type password" name="" pattern=".{6,}" oninvalid="this.setCustomValidity('Password must be 
6 atleast characters')" required><br>
                               <input type="password" id="confirm_password" class="mt-2 form-control" 
onclick="repass()" placeholder="Retype password" name="" pattern=".{6,}" 
oninvalid="this.setCustomValidity('Password must be 6 atleast characters')" required><br>
                               <span id='message'></span>
                          </div>
                     </div>

                </div>
                <div class="modal-footer">
                   <button type="submit" name="submit" class="btn btn-primary" id="submit_password" disabled>Change Password</button>
                 <a href="admin_logout.php">
                   <button type="button" class="btn btn-danger">Logout</button>
                 </a>
                </div>

<script>
    function repass(){

         $('#password, #confirm_password').on('keyup keydown', function () {
         if ($('#password').val() == $('#confirm_password').val()) {
         $('#message').html(' ').css('color', 'red');
         $('#submit_password').attr("disabled", false);
    } else{
         $('#submit_password').attr("disabled", true);
         $('#message').html('Password does not match').css('color', 'red');
         }
         // if (($('#password').val()) == null) {
         //      $('#message').html(' ').css('color', 'red');
         //      $('#submit_password').attr("disabled", true);
         //
         // }
    });
}
    </script>
     <script>
        $("#submit_password").click(function(e) {
            // e.preventDefault();
            var password = $('#password').val();
            $.ajax({
                type: 'POST',
                data: {password:password},
                url: 'change_pass.php',
                success: function(data) {
                    // alert(data);
                    swal( {
                       title: "SUCCESS!", text: "Password changed!", icon: "success", timer: 1800, button: false,
                   }
                   );
                   $('#change_pass').modal('hide');
                }
            });
        });
     </script>

Answer 1

没有出现验证规则的原因是您的输入未包含在form 中，并且您没有提交该表单。如果您更正了这一点，您的代码将起作用。

还请注意，您可以通过删除内联事件处理程序并以不显眼的方式附加它们来改进 HTML。试试这个：

$('#password, confirm_password').on('invalid', function(e) {
  this.setCustomValidity(e.target.validity.patternMismatch ? 'Password must be 6 atleast characters' : '');
});

$('#password, #confirm_password').on('keyup keydown', function() {
  if ($('#password').val() === $('#confirm_password').val()) {
    $('#message').html(' ');
    $('#submit_password').attr("disabled", false);
  } else {
    $('#submit_password').attr("disabled", true);
    $('#message').html('Password does not match');
  }
});

$("#yourForm").on('submit', function(e) {
  var password = $('#password').val();

  $.ajax({
    type: 'POST',
    data: {
      password: password
    },
    url: 'change_pass.php',
    success: function(data) {
      // success actions...
    }
  });
});

#message {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" id="yourForm">
  <div style="text-align:center;">
    <div style="display:inline-block">
      <input type="password" id="password" class="my-2 form-control" placeholder="Type password" name="" pattern=".{6,}" required><br>
      <input type="password" id="confirm_password" class="mt-2 form-control" placeholder="Retype password" name="" pattern=".{6,}" required><br>
      <span id='message'></span>
    </div>
  </div>
  <div class="modal-footer">
    <button type="submit" name="submit" class="btn btn-primary" id="submit_password" disabled>Change Password</button>
    <a href="admin_logout.php">
      <button type="button" class="btn btn-danger">Logout</button>
    </a>
  </div>
</form>

Answer 2

var password = $('#password').val();

if(password.lenth < 6){
 console.log("Length must be 6 character long");
 return false;
}