如何在用户点击其他地方时验证表单

对于我正在创建的注册表单，我想验证密码，以便用户必须输入包含至少一个大写字母和至少一个数字的密码。如何在用户点击其他地方时验证表单

我已经实现了这个位置： http://jsfiddle.net/k9aHV/1/

<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>

目前，仅当用户按下提交域的验证。

如何调整我的代码，以便在用户从输入字段中选择或单击时验证代码？

来源

2014-01-31 Kenshin

其中setCustomValidity'，'validity'和其他东西定义'？ –

@AshishKumar它在密码输入标签上定义了onblur。 – Kenshin

它没有定义，它在那里被使用。必须有这个函数的定义。 –

您可以在模糊触发本地验证，像这样

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

来源

2014-01-31 08:57:06 LostInComputer

如何在用户点击其他地方时验证表单

回答

相关问题