在通过 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;
}