如何创建 html5 自定义验证？答案

【问题标题】：How to create html5 custom validation?如何创建 html5 自定义验证？
【发布时间】：2014-03-28 01:40:49
【问题描述】：

我使用html 5表单验证在提交前验证我的表单，如果有效，提交，但我需要验证我的用户注册表单，所以它需要验证密码确认值是否等于camp密码，下面是我的表单示例：

<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

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

【问题讨论】：

标签： javascript html forms validation customization

【解决方案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('');
});

【讨论】：

data-equal-id 是 html 默认属性还是自定义属性？
是自定义属性

【解决方案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' 放入您的表单（或您想要的名称，但在第一行更改）

【讨论】：

【解决方案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');
});

故障...

我正在关闭 keyup，所以每次在函数将触发的密码字段。
我正在获取两个密码字段的值，并对其进行比较。
如果值相同，我将启用提交按钮。
如果值不同，我将禁用提交按钮。

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

（注意 - 我在演示中添加了一些其他视觉增强功能来展示可以做什么）

【讨论】：