Проверка правильности ввода (Validation)

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

мой массив

 var foo = {};
    foo['xarr'] = [ "23" ];
    foo['yarr'] = [ "21","21","22","23","24"];
    foo['zarr']= [ "70","71","72","73","74","75" ];
  

Поле ввода занимает максимум 4 символа, и у меня есть объект array
я хочу, чтобы, когда пользователь вводит первый буксирный символ и он совпадает с массивом, я хотел добавить класс в div.
если он совпадает с foo[‘xarr’], добавьте какой-нибудь другой класс, когда он совпадает с foo [‘yarr’], добавьте какой-нибудь другой класс и так далее.

моя HTML-разметка:

 <li class="Images">
    <div>
        <input type="text" name="cnumber1" class="inputBx" style="width:58px;" maxlength="4" size="4"/>            
    </div>
    <span class="test"></span>
</li>
  

Java Script

Я пытался этим способом, но не добился никакого успеха

 $('.inputBx').keydown(function() {
         var inputVal = $(this).val(),
             iLen = inputVal.length;
             if( iLen >= 2){
                for(var key in foo) {
                  if( foo[key].indexOf(inputVal) >= 0){
                      if(foo[key] == 'xarr' )
                          $('.Images .test ').addClass('fullOpactiy');
                      if(foo[key] == 'yarr' )
                          $('.cardImages .test ').addClass('fullOpactiy');
                      if(foo[key] == 'zarr' )
                          $('.Images .test ').addClass('fullOpactiy');
                  }
                }
             }
      });
  

Ответ №1:

Что-то я не понимаю в вашем коде :

 for(var key in foo) {
    if( foo[key].indexOf(inputVal) >= 0){
       if(foo[key] == 'xarr' ){
            //...
       }
    }
}
  

ключ находится в объекте foo, так что это либо xarr, yarr, либо zarr. Тогда foo[key] — это массив чисел (который исправляет ваше предложение foo[key].indexOf(inputVal) >= 0 ). Почему foo[key] всегда должно быть равно строке ‘xarr’ или ‘yarr’?
Я предлагаю это исправление, прежде чем продолжить ваше исследование :

 for(var key in foo) {
    var idx = foo[key].indexOf(inputVal); //search in the array
    if(  idx >= 0){
       if(key == 'yarr'){
            $('.cardImages .test ').addClass('fullOpactiy');
       }
       else{
          $('.Images .test ').addClass('fullOpacity');  
       }
       return true;//ends your search now, no need to continue
    }
}
  

Я думаю, что этот алгоритм сопоставления неоптимален, но он должен работать

приветствия

Grooveek

Ответ №2:

это работает для меня, вот рабочая демонстрация

 var foo = [];
foo['xarr'] = ["23"];
foo['yarr'] = ["21", "21", "22", "23", "24"];
foo['zarr'] = ["70", "71", "72", "73", "74", "75"];


$('.inputBx').keyup(function() {
    var inputVal = this.value;
    iLen = inputVal.length;
    if (iLen >= 2) {
        if ($.inArray(inputVal, foo['xarr']) >= 0) {
            $('.Images, .test').addClass('fullOpactiy')
        }
        if ($.inArray(inputVal, foo['yarr']) >= 0) {
            $('.cardImages, .test').addClass('fullOpactiy')
        }
        if ($.inArray(inputVal, foo['zarr']) >=0) {
            $('.Images, .test').addClass('fullOpactiy')
        }
    }
});