Question

这里的问题是我设计了一个基本网站，该网站接受用户在表单上的输入，然后我打算做的就是将值打印到console.log中。但是，当我在Google Chrome浏览器中的开发人员工具下检查控制台时，我打印出的全部是[] length：0__proto__：Array（0）而不是用户输入的值。

<input type="text" name="username" value="testuser">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
 function error() {
  	 
  	 var error1 = [];
  	 var list_of_values = [];

  	 username_error = $('input[name="username"]').val();
  	 if (!username_error){
  	     error1.push('Fill in the username field.');
      } 
 
    console.log(error1);
 
     if (error1.length > 0){
     	for(let username_error of error1){ 
     	 alert(username_error);
     return false;
     }
  
    }
  
     string = $('input[name="username"]').val('');
     if(string.length <= 1){
 	 for (let list_of_values of string){
 		string.push();
 		
 	}
        console.log(string);

        return true;
    }

    }
error();
</script>

Answer 1

建议，使用以下代码可以使事情变得更简单。下面的函数扫描fieldset元素下的所有输入字段 $（“ fieldset * [name]”）。each ....

上面的问题是多个警报，如果您有很多输入，它将在每个输入中发出警报，这对用户不利:)相反，您可以这样做

alert(error1.toString().replace(/,/g, "\n"));

立即提醒错误列表。

string = $（'input [name =“ username”]'）。val（''）; 这实际上是在清除您的价值。.因此它在console.log（）中不会给您任何东西。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<fieldset>
  <input type="text" name="name" value="" placeholder="name"/><br/><br/>
  <input type="text" name="username" value="" placeholder="username"/><br/><br/>
  <button onclick="error()">check</button>
</fieldset>

<script>


function error() {
    
     var error1 = [];
     var list_of_values = [];
     

 	 $("fieldset *[name]").each(function(){
       var inputItem = $(this);
       if(inputItem.val()) {
          return list_of_values.push(inputItem.val());
       }
       
       error1.push('Fill in the '+inputItem.attr('name')+' field!')
       
   });
 
  if(error1.length > 0) {
     console.log(error1);
     alert(error1.toString().replace(/,/g, "\n"));
  }
  if(list_of_values.length > 0) {
     console.log(list_of_values);
  }
}
</script>

Answer 2

将<input>注册到input事件。当用户在<input>中键入任何内容时，input事件可以触发事件处理程序（一个函数，在演示中为log()）。

演示

演示中评论的详细信息

// Reference the input
var text = document.querySelector('[name=username]');

// Register the input to the input event
text.oninput = log;

/*
Whenever a user types into the input...
Reference the input as the element being typed into
if the typed element is an input...
log its value in the console.
*/
function log(event) {
  var typed = event.target;

  if (typed.tagName === 'INPUT') {
    console.log(typed.value);
  }
}

<input type="text" name="username" value="testuser">

在Jquery

2 个答案:

演示