JavaScript“实时”表单验证
[英]JavaScript “Live” form validation
问题描述
I am trying to get an alert whenever a user clicks on the username or password input field and exits it without entering. 
每当用户单击用户名或密码输入字段并退出而不输入时，我都试图获得警报。 However, I am able to get this to work after using "onblur" instead of "onfocus" (Thanks to Gurvinder's answer below). 但是，在使用“ onblur”而不是“ onfocus”之后，我能够使它正常工作（感谢下面的Gurvinder的回答）。 Now, the alert seems to work for both the fields when I click outside of the form using "onfocus". 现在，当我使用“ onfocus”在表单外部单击时，警报似乎对两个字段都起作用。 However, when I use tab key to get to password field from username field to password field, the "passwordCheck" function keeps running. 但是，当我使用Tab键从用户名字段到密码字段进入密码字段时，“ passwordCheck”功能将继续运行。 Please help. 请帮忙。
<!DOCTYPE html>
<html>
<head>
<title>Javascript exercises</title>
<meta charset="UTF-8">
</head>
<body>
<form name="myForm" >
<table>
<tr>
<td>Username:</td>
<td><input name="username" id="userName" type="text" onfocus="userNameCheck();"></input></td>
</tr>
<tr>
<td>Password:</td>
<td><input name="password" id ="password" type="password" onfocus="passwordCheck();"></input></td>
</tr>
<tr>
<td></td>
<td><input type="Button" value="Submit"></input></td>
</tr>
</table>
</form>
<script>
//User name field validator - Alert a message for empty input fields
var userNameCheck = function() {
if(document.myForm.username.value == ""){
alert("User Name cannot be blank");
}
else{
return false;
}
}
//password field validator - Alert a message for empty input fields
var passwordCheck = function() {
if(document.myForm.password.value == ""){
alert("Password cannot be blank");
}
else{
return false;
}
}
</script>
</body>
</html>
2 个解决方案
解决方案1
0 已采纳 2017-11-10 15:07:03
I want the username input to show an alert if the user clicks on it and tabs to the next field without entering any data.
If you are using focus event to check for the input validity, then unless value is pre-populated, alert will keep coming. 如果您使用焦点事件来检查输入的有效性，那么除非预先填充值，否则警报将不断出现。
Use blur event, onblur instead of onfocus . 使用模糊事件onblur而不是onfocus 。
<td><input name="username" id="userName" type="text" onblur="userNameCheck();"></input></td>
Demo 演示版
<body> <form name="myForm"> <table> <tr> <td>Username:</td> <td><input name="username" id="userName" type="text" onblur="userNameCheck();"></input> </td> </tr> <tr> <td>Password:</td> <td><input name="password" id="password" type="password"></input> </td> </tr> <tr> <td></td> <td><input type="Button" value="Submit"></input> </td> </tr> </table> </form> <script> //User name field validator - Alert a message for empty input fields var userNameCheck = function() { if (document.myForm.username.length >= 1) { //Nothing happens } else { alert("User Name cannot be blank"); return false; } } </script> </body>
解决方案2
0 2017-11-10 16:16:00
Why not create your own 'alert' div for more control (and better user experience) . 为什么不创建自己的“警报” div以获得更多控制（和更好的用户体验） 。
$("input").focus(function(){
var x = document.forms["myForm"]["password"].value;
if (x == "") {
/*alert("Password cannot be blank");*/
$('.alert').show();
return false;
}
});
And to specify tab key scenario, try: 并指定选项卡键方案，请尝试：
function checkTabPress(key_val) {
if (event.keyCode == 9) {
$('.alert').hide();
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.