Pertanyaan Bisakah Anda meminta dua kolom formulir untuk dicocokkan dengan HTML5?


Apakah ada cara untuk mewajibkan entri dalam dua kolom formulir untuk dicocokkan menggunakan HTML5? Atau apakah ini masih harus dilakukan dengan javascript? Misalnya, jika Anda memiliki dua bidang kata sandi dan ingin memastikan bahwa pengguna telah memasukkan data yang sama di setiap bidang, apakah ada beberapa atribut, atau pengkodean lain yang dapat dilakukan, untuk mencapai ini?


75
2018-02-04 16:47


asal


Jawaban:


Tidak persis dengan validasi HTML5 tetapi sedikit JavaScript dapat menyelesaikan masalah, ikuti contoh di bawah ini:

<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



Anda bisa dengan ekspresi reguler Pola Masukan (memeriksa kompatibilitas browser)

<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



Solusi sederhana dengan javascript minimal adalah menggunakan pola atribut html (didukung oleh paling peramban modern). Ini bekerja dengan mengatur pola bidang kedua ke nilai bidang pertama.

Sayangnya, Anda juga perlu menghindari regex, yang tidak ada fungsi standar.

<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 akan diperlukan, tetapi jumlah kode dapat dijaga seminimal mungkin dengan menggunakan perantara <output> elemen dan sebuah oninput form handler untuk melakukan perbandingan (pola dan validasi dapat menambah solusi ini, tetapi tidak ditampilkan di sini demi kesederhanaan):

<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