动态检查表单字段值javascript

Question

是否可以使用javascript动态检查表单字段值。 例如，如果我有用于用户名的表单字段，并且当用户输入他们选择的用户名，它会检查此用户名是否可用，并弹出警告框或根据结果在屏幕上显示一条消息。

所有这些都是在不点击任何按钮的情况下完成的。数据存储在一个数组中。

在此先感谢。我试图通过使用JavaScript来实现这一点。

Answer 1

var username = document.getElementById('username'); 
 
var goBtn = document.getElementById('check'); 
 
var output = document.getElementById('output'); 
 

 
var usernames = ['bob', 'sally', 'alice', 'roy', 'kate', 'phil']; 
 

 
function showResult() { 
 
    output.innerHTML = usernames.join(', '); 
 
} 
 

 
function checkUsername() { 
 
    if (usernames.indexOf(username.value) < 0) { 
 
    usernames.push(username.value); 
 
    username.value = ''; 
 
    } else { 
 
    alert('That username is already taken. Try again.'); 
 
    } 
 
    showResult(); 
 
} 
 

 
goBtn.onclick = checkUsername; 
 
showResult();

<label for="username">Name:</label> 
 
<input id="username" name="username" placeholder="username"> 
 
<button id="check">Go</button> 
 
<div id="output"></div>

Answer 2

可能这是你想要的

// usernameArray contains all the usernames that can't be used 
    var usernameArray = ['username1','username2','username3']; 

    // i'm using .kyup() method to get a dynamic result so whenever the user type a letter or 
    // something else (just one caracter) we check that value against our usernameArray list 

    $('#username').keyup(function(){ 
     var value = $(this).val(); 
     if(usernameArray.indexOf(value) >= 0){ 
       alert('sorry, try another username '); 
     }else{ 
      alert('good, you can use this username it is available'); 
     } 

    });