我制作了一个简单的HTML form，并希望对其进行自定义验证。我使用for循环来检查我的所有reg表达式，但它在if语句中首次检查后停止，无论是true还是false。我在哪里弄错了？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<meta name="udacity-grader" content="https://udacity.github.io/course-web-forms/lesson2/quizCustomValidity/grader/tests.json" libraries="jsgrader" unit-tests="https://udacity.github.io/course-web-forms/lesson2/quizCustomValidity/grader/unit_tests.js">
<title>Quiz - setCustomValidity</title>
</head>
<body>
<div class="container">
<h3>Create a new password</h3>
<p>Password should meet the following requirements:</p>
<ul>
<li>16-100 characters (longer is better)</li>
<li>At least one of these symbols: !, @, #, $, %, ^, &, *</li>
<li>At least one number</li>
<li>At least one lowercase letter</li>
<li>At least one uppercase letter</li>
</ul>
<form class="form-inline">
<div class="form-group">
<label class="sr-only">New password</label>
<input class="form-control" id="first" type="text" maxlength="100" placeholder="New password" autofocus>
</div>
<div class="form-group">
<label class="sr-only">Repeat password</label>
<input class="form-control" id="second" type="text" minlenght="16" maxlength="100" placeholder="Repeat password">
</div>
<button class="btn btn-default" id="submit" type="submit">Submit</button>
</form>
</div> <!-- container -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
var firstPasswordInput = document.querySelector('#first');
var secondPasswordInput = document.querySelector('#second');
var submit = document.querySelector('#submit');
var constraint = new RegExp;
var constraints = [
[/[\!\@\#\$\%\^\&\*]/g, "No match one of the required symbols"],
[/\d/g, "No match a number"],
[/[a-z]/g, "No match a lowercase letter"],
[/[A-Z]/g, "No match an uppercase letter"],
];
function checkPass () {
for (var i in constraints) {
constraint = constraints[i];
console.log(constraint[0]);
console.log(constraint[0].test(firstPasswordInput.value));
console.log(firstPasswordInput.value);
console.log("\n");
if (constraint[0].test(firstPasswordInput.value)) {
firstPasswordInput.setCustomValidity('');
} else {
firstPasswordInput.setCustomValidity(constraint[1]);
firstPasswordInput.checkValidity();
return 1;
}
}
return 0;
}
window.onload = function () {
firstPasswordInput.oninput = checkPass;
}
答案 0 :(得分：0)
有多个问题，比如在正则表达式中使用全局标志，请尝试
var firstPasswordInput = document.querySelector('#first');
var secondPasswordInput = document.querySelector('#second');
var form = document.querySelector('form');
var submit = document.querySelector('#submit');
var constraint = new RegExp;
var constraints = [
[/[!@#$%^&*]/, "No match one of the required symbols"],
[/\d/, "No match a number"],
[/[a-z]/, "No match a lowercase letter"],
[/[A-Z]/, "No match an uppercase letter"],
];
function checkPass(isSubmit) {
firstPasswordInput.setCustomValidity('');
constraints.some(function(constraint) {
if (!constraint[0].test(firstPasswordInput.value)) {
firstPasswordInput.setCustomValidity(constraint[1]);
return true;
}
});
if (!firstPasswordInput.checkValidity()) {
!isSubmit && submit.click();
return false;
} else {
return true;
}
}
window.onload = function() {
firstPasswordInput.oninput = checkPass;
form.onsubmit = function(){
return checkPass(true);
}
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="container">
<h3>Create a new password</h3>
<p>Password should meet the following requirements:</p>
<ul>
<li>16-100 characters (longer is better)</li>
<li>At least one of these symbols: !, @, #, $, %, ^, &, *</li>
<li>At least one number</li>
<li>At least one lowercase letter</li>
<li>At least one uppercase letter</li>
</ul>
<form class="form-inline">
<div class="form-group">
<label class="sr-only">New password</label>
<input class="form-control" id="first" type="text" maxlength="100" placeholder="New password" autofocus>
</div>
<div class="form-group">
<label class="sr-only">Repeat password</label>
<input class="form-control" id="second" type="text" minlenght="16" maxlength="100" placeholder="Repeat password">
</div>
<button class="btn btn-default" id="submit" type="submit">Submit</button>
</form>
</div>
<!-- container -->