Question

我想为20个输入框运行此语句。是否有一种干净的方式来结合？好像会有很多陈述。设计用于捕获输入到输入中的数据，然后在单击按钮后将其显示在HTML中。目前只有一行代码正常工作，需要将其添加到几行代码中。

$(".showreg").click(function(){

  var pagetitle = $('#f_k_page_title').val();  

  if(!pagetitle)
  {pagetitle = "Oop's No value entered";}
  $('#theValue').html(pagetitle);
 });

$(".showreg").click(function(){
  var nametitle = $('#f_name_title').val();

  if(!nametitle)
  {nametitle = "Oop's No value entered";}
  $('#theValue2').html(nametitle);

});

HTML

   <span id="theValue"></span>
   <span class="txt_111 s17" id="theValue2">Title:</span>
   <span class="txt_555 s17" id="theValue3"></span>

<div class="btn blue next-btn r-btn regclick3 capture_button showreg mt10">Next</div>

FormHTML

<form>
    <input id="f_k_page_title"/>
    <input id="f_name_title"/>

    <input class="btn blue createacc-btn " type="submit" name="submit" value="Create account"/>
</form>

Answer 1

只需在需要验证的所有对象上设置事件处理程序（CSS类帮助）：

$(".validateForEmpty").on("blur", function(evt){

 var input = $(this);

 // Get index number of the input within its group.
 var idx = $(".validateForEmpty").index(input);
 
 // Get reference to span corresponding to that same index
 var span = $(".output").get(idx);

 // Validate element that just lost the focus
 if(input.val().trim() === ""){
    $(span).text(input.attr("name") + " Can't be empty!");  // Put message corresponding span
 } else {
    $(span).text(input.attr("name") + " contains: " + input.val());  // Put value in corresponding span  
 }
});

.output { display:block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" name="a" class="validateForEmpty">
</div>
<div>
  <input type="text" name="b" class="validateForEmpty"><span class="error"></span>
</div>
<div>
  <input type="text" name="c" class="validateForEmpty"><span class="error"></span>
</div>
<div>
  <input type="text" name="d" class="validateForEmpty"><span class="error"></span>
</div>
<div>
  <input type="text" name="e" class="validateForEmpty"><span class="error"></span>
</div>
<div>
  <input type="text" name="f" class="validateForEmpty"><span class="error"></span>
</div>
<div>
  <input type="text" name="g" class="validateForEmpty"><span class="error"></span>
</div>
<div>
  <input type="text" name="h" class="validateForEmpty"><span class="error"></span>
</div>
<div>
  <input type="text" name="i" class="validateForEmpty"><span class="error"></span>
</div>

<div class="outputElements">
  <span class="output"></span>
  <span class="output"></span>
  <span class="output"></span>
  <span class="output"></span>
  <span class="output"></span>
  <span class="output"></span>
  <span class="output"></span>
  <span class="output"></span>
  <span class="output"></span>
</div>

Answer 2

理想情况下？为您关注的所有input添加一个公共类，并为每个data-valuespan添加一个<input id="f_k_page_title" class="validatee" data-valuespan="theValue" /> <input id="f_name_title" class="validatee" data-valuespan="theValue2" />属性，以便我们知道将消息放在何处，例如

$('.validatee').each( function() {
  var el = $(this);
  var val = el.val() || "Oops, no value entered";

  $('#' + el.data('valuespan')).text( val );
});

然后：

span

但如果您无法更改HTML，则您需要信任表单中元素的顺序。并考虑到所有$(".showreg").click(function(e) { var inps = $('form').first().find('input'); for (var i = 0; i < inps.length; ++i) { var inp = inps[i]; if (inp.type !== "submit") { var spanNum = (i > 0) ? (i + 1) : ''; var spanName = 'theValue' + spanNum; var val = inp.value || 'Oops, no value entered'; $('#' + spanName).text(val); } } }); s 除之外的第一个都有一个数字......

＆＃13;

span {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<span id="theValue"></span>
<span class="txt_111 s17" id="theValue2">Title:</span>
<span class="txt_555 s17" id="theValue3"></span>

<div class="btn blue next-btn r-btn regclick3 capture_button showreg mt10">Next</div>


<form>
  <input id="f_k_page_title" />
  <input id="f_name_title" />
  <input id="f_other" />

  <input class="btn blue createacc-btn " type="submit" name="submit" value="Create account" />
</form>

＆＃13;

_imp__shutdown

＆＃13;

如何集成多个语句

2 个答案: