当用户点击其他地方时如何验证表单答案

【问题标题】：How to validate form when user clicks elsewhere当用户点击其他地方时如何验证表单
【发布时间】：2014-01-31 07:00:47
【问题描述】：

对于我正在制作的注册表单，我想验证密码，以便用户必须输入包含至少一个大写字母和至少一个数字的密码。

<form action="login.php" method="post">
                    <p><b>UserName:</b> <input type="text" required pattern="\w+" name="fname"/></p>
                    <p><b>Password:</b> <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}" name="password" onblur="this.setCustomValidity(this.validity.patternMismatch ? 'Password must contain at least 6 characters, including UPPER/lowercase and numbers' : '');if(this.checkValidity()) form.password1.pattern = this.value;"></p>
                    <p><b>Confirm Password:</b> <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}" name="password1" onblur="
                    this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same password as above' : '');"/></p>
                    <p><b>Email:</b> <input type="email" name="email"/></p>
                    <input type="submit"/>
                </form>

目前，该字段仅在用户按下提交时才被验证。

我如何调整我的代码，以便在用户离开输入字段的选项卡或点击时立即验证代码？

【问题讨论】：

setCustomValidity、validity 和其他东西在哪里定义？
@AshishKumar 在密码输入标签上定义了onblur。
那里没有定义，正在那里使用。必须有这个函数的定义。
看到这个：jsfiddle.net/k9aHV/2 我已经更改了模糊验证及其工作正常密码字段。
@AshishKumar，如果您在我的 jfiddle 中输入了无效密码，然后按提交，则会收到消息“密码必须包含至少 6 个字符，包括大写/小写和数字”。这证明它是定义的。如果您包含大写字母、小写字母和数字并按提交，则不会收到此类错误消息。

标签： html validation

【解决方案1】：

您可以像这样在模糊上触发本机验证

input.addEventListener('blur', function(e) {
    e.target.checkValidity();
});

问题是您无法以编程方式触发验证错误弹出窗口。一种解决方法是以编程方式单击提交按钮，但弹出窗口将仅显示第一个无效输入元素！

更用户友好的解决方案是在元素中显示验证消息。

看到这个JSFiddle

var idx;    
var passwordInputs = document.querySelectorAll('input[type="password"]');
for(idx=0; idx< passwordInputs.length; idx++) {
    //set custom validation
    passwordInputs[idx].addEventListener('input', function(e) {
        if(e.target.validity.patternMismatch) {
            e.target.setCustomValidity('Password must contain at least 6 characters, including UPPER/lowercase and numbers');
        }
        else {
            e.target.setCustomValidity('');
        }
    });
}

//code starting here is to show the validation message in a span element
function showValMessage(elem, msg) {
    var span = elem.parentNode.querySelector('span');
    span.innerText  = msg;
}

var inputs = document.querySelectorAll('input');
for(idx=0; idx< inputs.length; idx++) {
    var input = inputs[idx];

    //validate on blur
    input.addEventListener('blur', function(e) {
        e.target.checkValidity();
    });

    //show validation message
    input.addEventListener('invalid', function(e) {
        showValMessage(e.target, e.target.validationMessage);
    });

    //hide validation message. There is on valid event :(
    input.addEventListener('input', function(e) {
        if(e.target.validity.valid) {
            showValMessage(e.target, '');
        }
    });
}

【讨论】：