Question

我是一名初级开发人员，并且一直在尝试使用javascript编写验证表单。似乎没有出现验证弹出窗口。有人可以看看我的代码并告诉我我错过了什么吗？

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="udacity-grader" content="http://udacity.github.io/course-web-forms/lesson2/quizCustomValidity/grader/tests.json" libraries="jsgrader" unit-tests="http://udacity.github.io/course-web-forms/lesson2/quizCustomValidity/grader/unit_tests.js">
    <title>Quiz - setCustomValidity</title>
</head>
<body>
    <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>

    <label>
        <input id="first" type="password" placeholder="New password" min="16" max="100" autofocus>
    </label>
    <label>
        <input id="second" type="password" min="16" max="100"placeholder="Repeat password">
    </label>
    <input id="submit" type="submit">
    <script src="app.js"></script>
</body>
</html>

var firstPasswordInput = document.querySelector('#first');
var secondPasswordInput = document.querySelector('#second');
var submit = document.querySelector('#submit');

submit.onclick = function() {
    if(firstPasswordInput != secondPasswordInput){
        secondPasswordInput.setCustomValidity('password does not match');
    }
    if (firstPasswordInput.includes('/[\!\@\#\$\%\^\&\*]/g')== false)
    {    firstPasswordInput.setCustomValidity('password must include one of the following !@#$%^&*');
    }
    if (firstPasswordInput.includes('/[0-9]/g')== false)
    {    firstPasswordInput.setCustomValidity('password must include a number');
    }
    if (firstPasswordInput.includes('/[a-z]/g')== false)
    {    firstPasswordInput.setCustomValidity('password must include a lowercase letter');
    }
    if (firstPasswordInput.includes('/[A-Z]/g')== false)
    {    firstPasswordInput.setCustomValidity('password must include an uppercase letter');
    }
    };

Answer 1

document.querySelector('#first')会返回输入元素，如果需要查看该值，则必须使用.value：

var firstElement = document.querySelector('#first');
var firstValue = document.querySelector('#first').value

您不能在元素上使用includes()方法，它是一种字符串方法。

而setCustomValidity()是一种元素方法。

var firstPasswordInput = document.querySelector('#first');

var secondPasswordInput = document.querySelector('#second');
var submit = document.querySelector('#submit');

submit.onclick = function() {

  var firstPasswordInputValue = firstPasswordInput.value;
  var secondPasswordInputValue = secondPasswordInput.value;

  console.log('submit');
  if (firstPasswordInputValue != secondPasswordInputValue) {
    secondPasswordInput.setCustomValidity('password does not match');
  }
  if (firstPasswordInputValue.includes('/[\!\@\#\$\%\^\&\*]/g') == false) {
    firstPasswordInput.setCustomValidity('password must include one of the following !@#$%^&*');
  }
  if (firstPasswordInputValue.includes('/[0-9]/g') == false) {
    firstPasswordInput.setCustomValidity('password must include a number');
  }
  if (firstPasswordInputValue.includes('/[a-z]/g') == false) {
    firstPasswordInput.setCustomValidity('password must include a lowercase letter');
  }
  if (firstPasswordInputValue.includes('/[A-Z]/g') == false) {
    firstPasswordInput.setCustomValidity('password must include an uppercase letter');
  }
};

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="udacity-grader" content="http://udacity.github.io/course-web-forms/lesson2/quizCustomValidity/grader/tests.json" libraries="jsgrader" unit-tests="http://udacity.github.io/course-web-forms/lesson2/quizCustomValidity/grader/unit_tests.js">
  <title>Quiz - setCustomValidity</title>
</head>

<body>
  <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>

  <label>
        <input id="first" type="password" placeholder="New password" min="16" max="100" autofocus>
    </label>
  <label>
        <input id="second" type="password" min="16" max="100"placeholder="Repeat password">
    </label>
  <input id="submit" type="submit">
  <script src="app.js"></script>
</body>

Answer 2

将输入包装在表单中。输入提交适用于在javascript代码工作之前发送请求，因此尝试使用按钮而不是输入类型提交，然后在所有检查之后，调用表单并提交它。
然而，

var firstPasswordInput = document.querySelector('#first');

仅返回输入元素，因此请尝试获取firstPasswordInput .value
希望这能帮到你！

使用javascript编写密码验证表单

2 个答案: