Bạn có thể yêu cầu hai trường biểu mẫu khớp với HTML5 không?

Có cách nào để yêu cầu các mục nhập trong hai trường biểu mẫu khớp nhau bằng cách sử dụng HTML5 không? Hay điều này vẫn phải được thực hiện với javascript? Ví dụ: nếu bạn có hai trường mật khẩu và muốn đảm bảo rằng người dùng đã nhập cùng một dữ liệu vào mỗi trường, thì có một số thuộc tính hoặc mã hóa khác có thể được thực hiện để đạt được điều này không?

Không chính xác với xác thực HTML5 nhưng một chút JavaScript có thể giải quyết vấn đề, hãy làm theo ví dụ dưới đây:

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

Bạn có thể với Mẫu nhập biểu thức chính quy (kiểm tra tính tương thích của trình duyệ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>

Một giải pháp đơn giản với javascript tối thiểu là sử dụng mẫu thuộc tính html (được hỗ trợ bởi hầu hết các trình duyệt hiện đại). Điều này hoạt động bằng cách đặt mẫu của trường thứ hai thành giá trị của trường đầu tiên.

Thật không may, bạn cũng cần phải thoát khỏi regex, không có hàm tiêu chuẩn nào tồn tại.

<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 sẽ được yêu cầu, nhưng số lượng mã có thể được giữ ở mức tối thiểu bằng cách sử dụng <output>phần tử trung gian và oninputtrình xử lý biểu mẫu để thực hiện so sánh (các mẫu và xác thực có thể tăng cường giải pháp này, nhưng không được hiển thị ở đây vì đơn giản):

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

Không chỉ HTML5 mà một chút JavaScript.
Nhấp vào [đây] 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;

Các câu trả lời sử dụng mẫu và regex ghi mật khẩu của người dùng vào các thuộc tính đầu vào dưới dạng văn bản thuần túy pattern='mypassword'. Điều này sẽ chỉ hiển thị nếu các công cụ dành cho nhà phát triển đang mở nhưng có vẻ như đây không phải là một ý tưởng hay.

Một vấn đề khác với việc sử dụng mẫu để kiểm tra sự trùng khớp là bạn có thể muốn sử dụng mẫu để kiểm tra xem mật khẩu có đúng dạng không, ví dụ: hỗn hợp các chữ cái và số.

Tôi cũng nghĩ rằng các phương pháp này sẽ không hoạt động tốt nếu người dùng chuyển đổi giữa các đầu vào.

Đây là giải pháp của tôi sử dụng nhiều JavaScript hơn một chút nhưng thực hiện kiểm tra bình đẳng đơn giản khi một trong hai đầu vào được cập nhật và sau đó đặt hiệu lực HTML tùy chỉnh. Cả hai đầu vào vẫn có thể được kiểm tra đối với một mẫu như định dạng email hoặc độ phức tạp của mật khẩu.

Đối với một trang thực, bạn sẽ thay đổi kiểu nhập thành 'mật khẩu'.

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

Như đã được đề cập trong các câu trả lời khác, không có cách HTML5 thuần túy nào để làm điều này.

Nếu bạn đã sử dụng JQuery , thì điều này sẽ làm những gì bạn cần:

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