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>

or in jsfiddle

如何为默认验证等工作创建自定义验证？

Answer 1

您可以使用JQuery并附加要为密码选择的属性，以通过input事件相互验证。使用setCustomValidity（）设置受影响的输入的消息，以在提交表单时覆盖默认消息。

请参阅更新后的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('');
});

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＆＃39; myform＆＃39;到您的表单（或您想要的名称，但在第一行更改）

Answer 3

使用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');
});

故障......

我正在键入密钥，所以每次按下一个键密码字段，该函数将触发。
我抓住两个密码字段的值，然后比较它们。
如果值相同，我将启用提交按钮。
如果值不同，我将禁用提交按钮。

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

（注意 - 我在演示中添加了几个其他视觉增强功能，以显示可以执行的操作）

如何创建html5自定义验证？

3 个答案: