动态检查表单字段值javascript

时间:2014-11-01 13:16:40

标签: javascript forms validation

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

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

提前致谢。我试图只使用javascript实现这一目标。

2 个答案:

答案 0 :(得分:0)



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();
&#13;
<label for="username">Name:</label>
<input id="username" name="username" placeholder="username">
<button id="check">Go</button>
<div id="output"></div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

可能这就是你想要的

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

    });