javascript - 带有普通 JavaScript 和验证的自定义 Web 组件

Question

我正在使用 Web 组件，但我想使用 javascript constrains 添加它的验证，但看起来这仅适用于输入元素，而我的主容器是 div。

我不确定是否存在解决此问题的方法。我曾尝试使用不显示或大小为 0x0 的输入，但这对我来说不喜欢并且效果不佳。

<form action="">
    <input type="text" required="" name="field1">
    <input type="text" required="" name="field2">
    <div name="mycustominput" myValidation="true">
        <!--
        children html elements render list and another things
        I want to validate this with the form
        -->
    </div>
</form>

你能帮我吗？

Answer 1

如果您尝试像这样一起验证一些输入:

<form id="passwordForm" novalidate>
<fieldset>
    <legend>Change Your Password</legend>
    <ul>
        <li>
            <label for="password1">Password 1:</label>
            <input type="password" required id="password1" />
        </li>
        <li>
            <label for="password2">Password 2:</label>
            <input type="password" required id="password2" />
        </li>
    </ul>
    <input type="submit" />
</fieldset>

js

var password1 = document.getElementById('password1');
var password2 = document.getElementById('password2');

var checkPasswordValidity = function() {
    if (password1.value != password2.value) {
        password1.setCustomValidity('Passwords must match.');
    } else {
        password1.setCustomValidity('');
    }        
};

password1.addEventListener('change', checkPasswordValidity, false);
password2.addEventListener('change', checkPasswordValidity, false);

var form = document.getElementById('passwordForm');
form.addEventListener('submit', function() {
    checkPasswordValidity();
    if (!this.checkValidity()) {
        event.preventDefault();
        //Implement you own means of displaying error messages to the user here.
        password1.focus();
    }
}, false);

此链接 ( http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/ ) 是您的。

祝你有美好的一天。