[forms] HTML5와 일치하는 두 개의 양식 필드를 요구할 수 있습니까?

Question 1

HTML5를 사용하여 일치하도록 두 양식 필드의 항목을 요구하는 방법이 있습니까? 아니면 여전히 자바 스크립트로해야합니까? 예를 들어, 두 개의 비밀번호 필드가 있고 사용자가 각 필드에 동일한 데이터를 입력했는지 확인하려는 경우이를 달성하기 위해 수행 할 수있는 몇 가지 속성 또는 기타 코딩이 있습니까?

Question 2

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

Question 3

정규식 입력 패턴으로 할 수 있습니다 ( 브라우저 호환성 확인 )

<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

최소한의 자바 스크립트를 사용하는 간단한 솔루션은 html 속성 패턴 ( 대부분의 최신 브라우저에서 지원)을 사용하는 것입니다. 이것은 두 번째 필드의 패턴을 첫 번째 필드의 값으로 설정하여 작동합니다.

불행히도 표준 함수가없는 정규식도 이스케이프해야합니다.

<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가 필요하지만 중간 <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>

Question 6

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>

자바 스크립트

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;

Question 7

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

Question 8

다른 답변에서 언급했듯이이를 수행하는 순수한 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>

스 니펫 확장