您是否需要两个表单字段才能与HTML5匹配？

Question

有没有办法要求两个表单字段中的条目使用HTML5匹配？或者这仍然需要使用javascript完成？例如,如果您有两个密码字段并且想要确保用户在每个字段中输入了相同的数据,是否有一些属性或其他编码可以实现此目的？

Answer 1

不完全是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" />

Answer 2

您可以使用正则表达式输入模式(检查浏览器兼容性)

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

Answer 3

使用最小javascript的简单解决方案是使用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>

Answer 4

将需要 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>

Answer 5

不仅是 HTML，还有一些 JavaScript

超文本标记语言

<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

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

CodePen 演示