Können Sie verlangen, dass zwei Formularfelder mit HTML übereinstimmen?

Question 1

Gibt es eine Möglichkeit, die Einträge in zwei Formularfeldern mithilfe von HTML abzugleichen? Oder muss das immer noch mit JavaScript gemacht werden? Wenn Sie beispielsweise zwei Passwortfelder haben und sicherstellen möchten, dass ein Benutzer in jedes Feld dieselben Daten eingegeben hat, gibt es einige Attribute oder andere Codierungen, die vorgenommen werden können, um dies zu erreichen?

Question 2

Nicht gerade mit HTML-Validierung, aber ein wenig JavaScript kann das Problem lösen, folgen Sie dem Beispiel unten:

function check() {
    var input = document.getElementById('password_confirm');
    if (input.value != document.getElementById('password').value) {
        input.setCustomValidity('Password Must be Matching.');
    } else {
        // input is valid -- reset the error message
        input.setCustomValidity('');
    }
}

<p>
  <label for="password">Password:</label>
  <input name="password" required="required" type="password" id="password" oninput="check()"/>
</p>

<p>
  <label for="password_confirm">Confirm Password:</label>
  <input name="password_confirm" required="required" type="password" id="password_confirm" oninput="check()"/>
</p>

<input type="submit" />

Question 3

Sie können mit regulären Ausdrücken Eingabemuster (überprüfen Browser-Kompatibilität)

<input id="password" name="password" type="password" pattern="^\S{6,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Must have at least 6 characters' : ''); if(this.checkValidity()) form.password_two.pattern = this.value;" placeholder="Password" required>

<input id="password_two" name="password_two" type="password" pattern="^\S{6,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : '');" placeholder="Verify Password" required>

Question 4

Eine einfache Lösung mit minimalem Javascript ist die Verwendung des HTML-Attributmusters (unterstützt von am meisten moderne Browser). Dies funktioniert, indem das Muster des zweiten Felds auf den Wert des ersten Felds gesetzt wird.

Leider müssen Sie auch die Regex maskieren, für die es keine Standardfunktion gibt.

<form>
    <input type="text" oninput="form.confirm.pattern = escapeRegExp(this.value)">
    <input name="confirm" pattern="" title="Fields must match" required>
</form>
<script>
    function escapeRegExp(str) {
      return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
    }
</script>

Question 5

JavaScript ist erforderlich, aber die Codemenge kann durch die Verwendung eines Vermittlers auf ein Minimum beschränkt werden <output> Element und ein oninput form handler, um den Vergleich durchzuführen (Muster und Validierung könnten diese Lösung erweitern, werden hier aber der Einfachheit halber nicht gezeigt):

<form oninput="result.value=!!p2.value&&(p1.value==p2.value)?'Match!':'Nope!'">
  <input type="password" name="p1" value="" required />
  <input type="password" name="p2" value="" required />
  <output name="result"></output>
</form>

Question 6

Nicht nur HTML, sondern ein bisschen JavaScript

HTML

<form class="pure-form">
    <fieldset>
        <legend>Confirm password with HTML5</legend>

        <input type="password" placeholder="Password" id="password" required>
        <input type="password" placeholder="Confirm Password" id="confirm_password" required>

        <button type="submit" class="pure-button pure-button-primary">Confirm</button>
    </fieldset>
</form>

JavaScript

var password = document.getElementById("password")
      , confirm_password = document.getElementById("confirm_password");
    
function validatePassword(){
    confirm_password.setCustomValidity( password.value != 
    confirm_password.value ? "Passwords Don't Match" : '');
}

password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;

CodePen-Demo

Question 7

Wie in anderen Antworten erwähnt wurde, gibt es dafür keine reine HTML-Methode.

Wenn Sie bereits verwenden JQuerydann sollte dies tun, was Sie brauchen:

$(document).ready(function() {
  $('#ourForm').submit(function(e){
      var form = this;
      e.preventDefault();
      // Check Passwords are the same
      if( $('#pass1').val()==$('#pass2').val() ) {
          // Submit Form
          alert('Passwords Match, submitting form');
          form.submit();
      } else {
          // Complain bitterly
          alert('Password Mismatch');
          return false;
      }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="ourForm">
    <input type="password" name="password" id="pass1" placeholder="Password" required>
    <input type="password" name="password" id="pass2" placeholder="Repeat Password" required>
    <input type="submit" value="Go">
</form>

Question 8

      <div className="form-group">
        <label htmlFor="password">Password</label>
        <input
          value={password}
          onChange={(e) => { setPassword(e.target.value) }}
          type="password" id='password' name="password" required minLength={3} maxLength={255} />
      </div>
      <div className="form-group">
        <label htmlFor="confirmPassword">Confirm Password</label>
        <input
          title="Passwords should be match"
          pattern={`${password}`}
          value={confirmPassword}
          onChange={(e) => { setConfirmPassword(e.target.value) }}
          type="password" id='confirmPassword' name="confirmPassword" required minLength={3} maxLength={255} />
      </div>