Frage Können Sie zwei Formularfelder für die Übereinstimmung mit HTML5 benötigen?


Gibt es eine Möglichkeit, die Einträge in zwei Formularfeldern mit HTML5 zu vergleichen? Oder muss das noch mit Javascript gemacht werden? Wenn Sie beispielsweise zwei Kennwortfelder haben und sicherstellen möchten, dass ein Benutzer dieselben Daten in jedem Feld eingegeben hat, gibt es einige Attribute oder eine andere Codierung, die ausgeführt werden kann, um dies zu erreichen?


75
2018-02-04 16:47


Ursprung


Antworten:


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

<p>Password:</p>
<input name="password" required="required" type="password" id="password" />
<p>Confirm Password:</p>
<input name="password_confirm" required="required" type="password" id="password_confirm" oninput="check(this)" />
<script language='javascript' type='text/javascript'>
    function check(input) {
        if (input.value != document.getElementById('password').value) {
            input.setCustomValidity('Password Must be Matching.');
        } else {
            // input is valid -- reset the error message
            input.setCustomValidity('');
        }
    }
</script>
<br /><br />
<input type="submit" />

67
2017-09-19 11:36



Sie können mit regulären Ausdrücken Eingabemuster (prü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>

23
2017-09-22 11:59



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

Leider müssen Sie auch der Regex entkommen, für die keine Standardfunktion existiert.

<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>

9
2017-10-18 12:18



JavaScript wird benötigt, aber die Menge an Code kann durch Verwendung eines Vermittlers auf ein Minimum reduziert 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>

2
2018-01-19 00:59