使用 javascript 编写密码验证表单答案

【问题标题】：Writing a password validation form with javascript使用 javascript 编写密码验证表单
【发布时间】：2018-02-10 20:52:01
【问题描述】：

我是一名初级开发人员，一直在尝试使用 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');
    }
    };

【问题讨论】：

为什么将密码限制为最多 100 个字符？
嘿，我想你忘了把你的javascript放在<script>和</script>标签中；）

标签： javascript html forms

【解决方案1】：

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

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

只返回输入元素，所以尝试获取firstPasswordInput .value
希望对您有所帮助！

【讨论】：

【解决方案2】：

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>

【讨论】：

是的，当然，感谢您指出，我修复了 sn-p。