J查询验证，如果复选框是选中条件?

Question

>我有一个表单，如果选中复选框，我将允许用户更改其密码，否则不允许用户更改其密码。

我该怎么做？

$(function() {
var passworderror = "Password should be alphanumeric, 1 uppercase, 1 lowercase and 6 to 20 characters long.";
$.validator.addMethod("pwcheckspechars", function(value) {
return /[!@#$£%^&*()_=[]{};':"\|,.<>/?+-]/.test(value)
}, passworderror);
$.validator.addMethod("pwchecklowercase", function(value) {
return /[a-z]/.test(value) // has a lowercase letter
}, passworderror);
$.validator.addMethod("pwcheckuppercase", function(value) {
return /[A-Z]/.test(value) // has an uppercase letter
}, passworderror);
$.validator.addMethod("pwchecknumber", function(value) {
return /d/.test(value) // has a digit
}, passworderror);
$('.myform').validate({
rules: {
changepsw: {
required: true
},
newpassword: {
required: true
}
}
});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" class="myform">
<input type="checkbox" id="changepsw" name="changepsw">
<br/>
<label for="newpassword">New Password</label>
<input type="text" name="newpassword" id="newpassword">
<br/>
<input type="submit" value="submit">
</form>

Answer 1

您可以尝试在单击复选框时启用/禁用表单。然后被选中，启用验证。

var passworderror = "Password should be alphanumeric, 1 uppercase, 1 lowercase and 6 to 20 characters long.";
$.validator.addMethod("pwcheckspechars", function (value) {
return /[!@#$£%^&*()_=[]{};':"\|,.<>/?+-]/.test(value)
}, passworderror);
$.validator.addMethod("pwchecklowercase", function (value) {
return /[a-z]/.test(value) // has a lowercase letter
}, passworderror);
$.validator.addMethod("pwcheckuppercase", function (value) {
return /[A-Z]/.test(value) // has an uppercase letter
}, passworderror);
$.validator.addMethod("pwchecknumber", function (value) {
return /d/.test(value) // has a digit
}, passworderror);
var validator = $('.myform').validate();
$('#changepsw').click(function() {
if($(this).is(':checked')) {
$('#newpassword').attr('disabled', false).rules('add', {
required: true,
pwcheckspechars: true,
pwchecklowercase: true,
pwcheckuppercase: true,
pwchecknumber: true

});
$('input[type="submit"]').attr('disabled', false);
} else {
validator.resetForm()
$('#newpassword').attr('disabled', true).rules('remove');
$('input[type="submit"]').attr('disabled', true);
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>
<form action="" method="post" class="myform">
<input type="checkbox" id="changepsw" name="changepsw">
<br/>
<label for="newpassword">New Password</label>
<input type="text" name="newpassword"  id="newpassword" disabled>
<br/>
<input type="submit" value="submit" disabled>
</form>

Answer 2

试试这个方法

$(function(){
var passworderror = "Password should be alphanumeric, 1 uppercase, 1 lowercase and 6 to 20 characters long.";

$.validator.addMethod("pwcheckspechars", function (value) {
if($("#changepsw").is(':checked')){  
return /[!@#$£%^&*()_=[]{};':"\|,.<>/?+-]/.test(value)
}else{
return true;
}
}, passworderror);
$.validator.addMethod("pwchecklowercase", function (value) {
if($("#changepsw").is(':checked')){
return /[a-z]/.test(value)
}else{
return true;
}
}, passworderror);
$.validator.addMethod("pwcheckuppercase", function (value) {
if($("#changepsw").is(':checked')){
return /[A-Z]/.test(value) // has an uppercase letter
}else{
return true;
}
}, passworderror);
$.validator.addMethod("pwchecknumber", function (value) {
if($("#changepsw").is(':checked')){
return /d/.test(value) // has a digit
}else{
return true;
}
}, passworderror);

$('.myform').validate({
rules:{
changepsw: {
required:true
},
newpassword:{
required:function(){
return "#changepsw:checked"
},
pwcheckspechars :true,
pwchecklowercase:true,
pwcheckuppercase:true,
pwchecknumber:true
}
}
});
})