如何將 javascript 密碼檢查器添加到 html 表單

Question

我有以下 HTML 表單，用作密碼更改表單。 當用戶通過身份驗證時，他們的個人資料中有一個選項可以更改他們的密碼，這是呈現給用戶的 HTML 表單。 我有一個單獨的 HTML 表單，我為注冊而創建，這個表單中有一些 javascript 來執行客戶端密碼檢查，以確保它滿足某些復雜性要求。 我想在更改密碼 HTML 表單上使用相同的功能，但我在弄清楚如何最好地完成此操作時遇到了一些麻煩。

這是我的 change_password HTML 表單。

{% extends "base.html" %}
 
{% block content %}
 
<div class="user-profile">
  <div class="page-header">
    <h2>Password Change</h2>
  </div>
 
    <form action="" method="post" novalidate>
        {{ form.hidden_tag() }}
        <p>
            {{ form.old_password.label }}<br>
            {{ form.old_password }}<br>
            {% for error in form.old_password.errors %}
            <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.new_password.label }}<br>
            {{ form.new_password(size=32) }}<br>
            {% for error in form.new_password.errors %}
            <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>        
        <p>
            {{ form.new_password2.label }}<br>
            {{ form.new_password2(size=32) }}<br>
            {% for error in form.new_password2.errors %}
            <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>{{ form.submit() }}</p>
    </form>
</div>
{% with messages = get_flashed_messages() %}
  {% if messages %}
    <ul class=flashes>
    {% for message in messages %}
      <li>{{ message }}</li>
    {% endfor %}
    </ul>
  {% endif %}
{% endwith %}
 
{% endblock %}

這是我用於用戶注冊的表單，其中包含 javascript，用於檢查輸入的密碼以確保它滿足復雜性要求。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Style all input fields */
input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
}

/* Style the submit button */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
}

/* Style the container for inputs */
.container {
  background-color: #f1f1f1;
  padding: 20px;
}

/* The message box is shown when the user clicks on the password field */
#message {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 20px;
  margin-top: 10px;
}

#message p {
  padding: 10px 35px;
  font-size: 18px;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -35px;
  content: "✔";
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -35px;
  content: "✖";
}
</style>
</head>
<body>
    <section class="hero is-primary is-fullheight">
        <div class="hero-head">
            <nav class="navbar">
                <div class="container">

                    <div id="navbarMenuHeroA" class="navbar-menu">
                        <div class="navbar-end">
                            <a href="{{ url_for('main.index') }}" class="navbar-item">Home</a>
                            {% if current_user.is_authenticated %}
                            <a href="{{ url_for('main.profile') }}" class="navbar-item">Profile</a>
                            {% endif %}
                            {% if current_user.is_authenticated %}
                            <a href="{{ url_for('main.tables') }}" class="navbar-item">Tables</a>
                            {% endif %}
                            {% if not current_user.is_authenticated %}
                            <a href="{{ url_for('auth.login') }}" class="navbar-item">Login</a>
                            {% endif %}
                            {% if current_user.is_authenticated %}
                            <a href="{{ url_for('auth.logout') }}" class="navbar-item">Logout</a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </nav>
        </div>

        <div class="hero-body">
            <div class="container has-text-centered">
            </div>
        </div>
    </section>



<h3>User Signup Form</h3>
<p>Fill in the information below to create an account. Once you've successfully signed up, you'll be taken to the login prompt.</p>



<div class="container">
  <form method="POST" action="/signup">
    <label for ="email">Email</label>
    <input type="email" id="email" name="email" placeholder="Email" required>
    <label for="usrname">Name</label>
    <input type="text" id="name" name="name" placeholder="Name" required>

    <label for="password">Password</label>
    <input type="password" id="psw" name="password" placeholder="Password" pattern= "^.*(?=.{12,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#!$%^+=]).*$"title="Must contain at least one number and one uppercase and lowercase letter and one special character, and be at least 12 or more characters" required>    
    <input type="submit" value="Submit">
  </form>
</div>

<div id="message">
  <h3>Password must contain the following:</h3>
  <p id="letter" class="invalid">A <b>lowercase</b> letter</p>
  <p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
  <p id="number" class="invalid">A <b>number</b></p>
  <p id="length" class="invalid">Minimum <b>12 characters</b></p>
  <p id="character" class="invalid">Minimum <b>1 special character</b></p>
</div>
                
<script>
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
var character = document.getElementById("character")

// When the user clicks on the password field, show the message box
myInput.onfocus = function() {
  document.getElementById("message").style.display = "block";
}

// When the user clicks outside of the password field, hide the message box
myInput.onblur = function() {
  document.getElementById("message").style.display = "none";
}

// When the user starts to type something inside the password field
myInput.onkeyup = function() {
  // Validate lowercase letters
  var lowerCaseLetters = /[a-z]/g;
  if(myInput.value.match(lowerCaseLetters)) {  
    letter.classList.remove("invalid");
    letter.classList.add("valid");
  } else {
    letter.classList.remove("valid");
    letter.classList.add("invalid");
  }

  // Validate capital letters
  var upperCaseLetters = /[A-Z]/g;
  if(myInput.value.match(upperCaseLetters)) {  
    capital.classList.remove("invalid");
    capital.classList.add("valid");
  } else {
    capital.classList.remove("valid");
    capital.classList.add("invalid");
  }

  // Validate numbers
  var numbers = /[0-9]/g;
  if(myInput.value.match(numbers)) {  
    number.classList.remove("invalid");
    number.classList.add("valid");
  } else {
    number.classList.remove("valid");
    number.classList.add("invalid");
  }

  // Validate length
  if(myInput.value.length >= 12) {
    length.classList.remove("invalid");
    length.classList.add("valid");
  } else {
    length.classList.remove("valid");
    length.classList.add("invalid");
  }

  // Validate character
  var special_character = /[^A-Za-z0-9]/g;
  if(myInput.value.match(special_character)) {
    character.classList.remove("invalid");
    character.classList.add("valid");
  } else {
    character.classList.remove("valid");
    character.classList.add("invalid");
  }

}
</script>
</body>
</html>

我想在我的 HTML 表單上使用相同的 javascript 邏輯。 我怎么能這樣做？ 謝謝

Answer 1

在注冊中，您有一個完整的腳本部分，用於檢查密碼欄的 onkeyup，以及幾個元素來提醒用戶他們缺少什么，只需將元素及其 id 引用復制到新文件中，然后添加一個 onkeyup新文件中密碼字段的事件，並將您在注冊表中的所有 it 語句添加到新文件中

添加現在第一個中根本沒有 JavaScript

如何將 javascript 密碼檢查器添加到 html 表單

問題描述

1 個解決方案

解決方案1
0 2020-10-13 15:21:23

如何將 javascript 密碼檢查器添加到 html 表單

問題描述

1 個解決方案

解決方案1 0 2020-10-13 15:21:23

解決方案1
0 2020-10-13 15:21:23