คุณต้องการฟิลด์แบบฟอร์มสองช่องเพื่อจับคู่กับ HTML5 หรือไม่

มีวิธีกำหนดให้รายการในช่องฟอร์มสองช่องจับคู่โดยใช้ HTML5 หรือไม่? หรือว่ายังต้องทำ javascript? ตัวอย่างเช่นหากคุณมีช่องรหัสผ่านสองช่องและต้องการให้แน่ใจว่าผู้ใช้ป้อนข้อมูลเดียวกันในแต่ละช่องมีแอตทริบิวต์หรือการเข้ารหัสอื่น ๆ ที่สามารถทำได้หรือไม่เพื่อให้บรรลุเป้าหมายนี้

ไม่ตรงกับการตรวจสอบ HTML5 แต่ JavaScript เพียงเล็กน้อยสามารถแก้ไขปัญหาได้ทำตามตัวอย่างด้านล่าง:

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

คุณสามารถใช้นิพจน์ทั่วไปรูปแบบการป้อนข้อมูล (ตรวจสอบความเข้ากันได้ของเบราว์เซอร์ )

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

วิธีแก้ปัญหาง่ายๆด้วยจาวาสคริปต์น้อยที่สุดคือการใช้รูปแบบแอตทริบิวต์ html (รองรับโดยเบราว์เซอร์ที่ทันสมัยส่วนใหญ่ ) ซึ่งทำงานได้โดยตั้งค่ารูปแบบของฟิลด์ที่สองเป็นค่าของฟิลด์แรก

น่าเสียดายที่คุณต้องหลีกเลี่ยง regex ซึ่งไม่มีฟังก์ชันมาตรฐานอยู่

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

จำเป็นต้องใช้ JavaScript แต่สามารถรักษาจำนวนโค้ดให้น้อยที่สุดได้โดยใช้<output>องค์ประกอบตัวกลางและoninputตัวจัดการแบบฟอร์มเพื่อทำการเปรียบเทียบ (รูปแบบและการตรวจสอบความถูกต้องสามารถเพิ่มโซลูชันนี้ได้ แต่จะไม่แสดงที่นี่เพื่อความเรียบง่าย):

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

ไม่เพียง แต่ HTML5 เท่านั้น แต่ยังมี JavaScript อีกเล็กน้อย
คลิก [ที่นี่] https://codepen.io/diegoleme/pen/surIK

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(){
  if(password.value != confirm_password.value) {
    confirm_password.setCustomValidity("Passwords Don't Match");
  } else {
    confirm_password.setCustomValidity('');
  }
}

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

คำตอบที่ว่ารูปแบบการใช้งานและ regex pattern='mypassword'เขียนรหัสผ่านของผู้ใช้ไปคุณสมบัติการป้อนข้อมูลเป็นข้อความธรรมดา สิ่งนี้จะปรากฏให้เห็นก็ต่อเมื่อเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เปิดอยู่ แต่ดูเหมือนจะไม่เป็นความคิดที่ดี

ปัญหาอีกประการหนึ่งในการใช้รูปแบบเพื่อตรวจสอบการจับคู่คือคุณอาจต้องการใช้รูปแบบเพื่อตรวจสอบว่ารหัสผ่านอยู่ในรูปแบบที่ถูกต้องเช่นตัวอักษรผสมและตัวเลข

ฉันยังคิดว่าวิธีการเหล่านี้จะไม่ได้ผลหากผู้ใช้สลับระหว่างอินพุต

นี่คือวิธีแก้ปัญหาของฉันซึ่งใช้ JavaScript มากกว่าเล็กน้อย แต่ทำการตรวจสอบความเท่าเทียมกันอย่างง่ายเมื่อมีการอัปเดตอินพุตใด ๆ จากนั้นตั้งค่าความถูกต้องของ HTML ที่กำหนดเอง อินพุตทั้งสองยังสามารถทดสอบรูปแบบเช่นรูปแบบอีเมลหรือความซับซ้อนของรหัสผ่าน

สำหรับหน้าเว็บจริงคุณจะเปลี่ยนประเภทการป้อนข้อมูลเป็น 'รหัสผ่าน'

<form>
    <input type="text" id="password1" oninput="setPasswordConfirmValidity();">
    <input type="text" id="password2" oninput="setPasswordConfirmValidity();">
</form>
<script>
    function setPasswordConfirmValidity(str) {
        const password1 = document.getElementById('password1');
        const password2 = document.getElementById('password2');

        if (password1.value === password2.value) {
             password2.setCustomValidity('');
        } else {
            password2.setCustomValidity('Passwords must match');
        }
        console.log('password2 customError ', document.getElementById('password2').validity.customError);
        console.log('password2 validationMessage ', document.getElementById('password2').validationMessage);
    }
</script>

ดังที่ได้กล่าวไว้ในคำตอบอื่น ๆ ไม่มีวิธี HTML5 ที่บริสุทธิ์ในการทำเช่นนี้

หากคุณใช้JQuery อยู่แล้วสิ่งนี้ควรทำในสิ่งที่คุณต้องการ:

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