如何创建HTML5自定义验证？

Question

我正在使用 HTML 5 表单验证来验证我的表单，如果有效，则提交。但我需要验证我的用户注册表单，因此它需要验证密码确认值是否等于密码。以下是我的表单示例：

<form>
    <label>Login:</label>
    <input type="text" name="login" id="login"/><br/>
    <label>Password:</label>
    <input type="password" name="pass" id="pass"/><br/>
    <label>Password Confirm:</label>
    <input type="password" name="pass_conf" id="pass_conf"/><br/>

    <input type="submit"/>
</form>

我应如何创建自定义验证，以使其像默认验证一样工作?

或者在jsfiddle中查看

- Lai32290

Answer 1

你可以使用jQuery并通过 input 事件将一个属性附加到要选择的密码上，以使它们相互验证。使用 setCustomValidity() 来设置受影响输入的消息，以覆盖表单提交时的默认消息。

请参见更新的 fiddle 。

如您在fiddle中所看到的，您只需要添加一个 data-equal-id 属性，其中属性值必须是要测试的密码输入元素的ID。

HTML

<h1>How to create html5 validation for password confirm?</h1>
<hr>
<form>
    <label>Login:</label>
    <input type="text" name="login" id="login"/><br/>
    <label>Password:</label>
    <input type="password" name="pass" id="pass"/><br/>
    <label>Password Confirm:</label>
    <input type="password" name="pass_conf" id="pass_conf" data-equal-id="pass" /><br/>
    <input type="submit"/>
</form>

Javascript

$('[data-equal-id]').bind('input', function() {
    var to_confirm = $(this);
    var to_equal = $('#' + to_confirm.data('equalId'));

    if(to_confirm.val() != to_equal.val())
        this.setCustomValidity('Password must be equal');
    else
        this.setCustomValidity('');
});

- ryeballar

---

data-equal-id是HTML的默认属性还是自定义属性？ - Lai32290

这是一个自定义属性。 - ryeballar

Answer 2

您可以尝试将此代码放在您的页眉中：

<script>
document.getElementById('myform').onsubmit = function() {

    if(!validateForm()){ // call your validation function
        alert('fail!'); // remove this
        return false; // prevent the form to submit
    }
}

// your validation function
// compares that the passwords are equal
function validateForm(){
    var pass = document.getElementById('pass').value;
    var pass_conf = document.getElementById('pass_conf').value;

    if(pass == pass_conf){
        return true;
    }else{
        return false;
    }

}
</script>

还要将id“myform”放到您的表单中（或者您想要的名称，但在第一行中更改它）

- eventHandler

Answer 3

你正在使用HTML5进行客户端表单验证，并希望在提交表单之前验证表单。你的表单包含三个输入框，你唯一的验证标准是两个密码字段必须匹配。

最简单的方法是编写一个自定义的提交处理程序脚本：

const handleFormSubmit = (event) => {
  event.preventDefault();
  form = event.target;
  if (form.pass === form.pass_conf) {
     form.submit();
  }
}

以上的preventDefault()会停止默认的表单提交行为，以便您可以执行您的检查。然后检查两个密码字段的值是否相等。如果相等，则继续表单提交。

要使用，请通过监听submit事件将自定义处理程序附加到您的表单：

const form = document.querySelector('form');
form.addEventListener('submit', handleFormSubmit);

应用于提供的示例表单上下文中：

<form>
  <label>Login:</label>
  <input type="text" name="login" id="login"/><br/>
  <label>Password:</label>
  <input type="password" name="pass" id="pass"/><br/>
  <label>Password Confirm:</label>
  <input type="password" name="pass_conf" id="pass_conf"/><br/>

  <input type="submit"/>
</form>

<script>
  const form = document.querySelector('form');
  form.addEventListener('submit', handleFormSubmit);

  const handleFormSubmit = (event) => {
    event.preventDefault();
    form = event.target;
    if (form.pass.value === form.pass_conf.value) {
       form.submit();
    }
  }
</script>

- vhs

Answer 4

像这样使用jQuery有趣的东西怎么样？

$('input[type="password"]').keyup(function() {
  var pass=$('#pass').val();
  var conf=$('#pass_conf').val();
  if (pass == conf)
    $('input[type="submit"]').removeAttr('disabled');
  else
    $('input[type="submit"]').attr('disabled', 'disabled');
});

这个函数是基于keyup事件的，所以每次在密码框中按键时都会触发该函数。

• 我获取了两个密码框的值，并进行比较。
• 如果这两个值相同，我就启用提交按钮。
• 如果这两个值不同，我就禁用提交按钮。

非常简单，但它有效。这里有一个演示：http://codepen.io/anon/pen/GxAyC/

（注意 - 我在演示中添加了一些其他的视觉增强效果，以展示可以做些什么）

- Charlie74