动态检查表单字段值javascript答案

【问题标题】：dynamically check form field values javascript动态检查表单字段值javascript
【发布时间】：2014-11-01 13:16:39
【问题描述】：

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

所有这些都无需单击任何按钮即可完成。并且数据存储在一个数组中。

提前致谢。我试图仅通过使用 javascript 来实现这一点。

【问题讨论】：

stackoverflow.com/questions/14659098/…

【解决方案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>

【讨论】：

【解决方案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');
        }

    });

【讨论】：