jquery - 使用 jQuery 优化验证形式

Question

我想要进行验证，这会在输入的占位符中显示错误消息。我编写代码来检查 1 表单字段，并在其为空时更改其占位符。如何针对三个领域进行优化？

$(document).ready(function() {
$("#submit").click(function() { if($("#name").val()==''||$("#name").val()==null){ $("#name").val("").attr("placeholder","An error occured!").addClass("changePlaceColor1").addClass("changePlaceColor2").addClass("changePlaceColor3").addClass("changePlaceColor4");    }  })  })

here is my code in the codepen

还希望这些更改保持不变，直到您按下输入。

Answer 1

只需在所有需要验证的字段中添加一个 class="validation"，并将你的 js 更改为此

<form>
  <input id="name" type="text" placeholder="test message1" data-error="1" class="validation" />
  <input id="phone" type="tel" placeholder="test message1" data-error="2" class="validation"/>
  <input id="email" type="email" placeholder="test message1" data-error="3" class="validation"/>
  <button id="submit">Submit</button>
</form>

 $(document).ready(function() {
  $("#submit").click(function(e) {
    $(".validation").each(function(){
        if($(this).val()==''||$(this).val()==null){
          $(this).val("")
            .attr("placeholder",$(this).data("error"))
            .addClass("changePlaceColor1")
            .addClass("changePlaceColor2")
            .addClass("changePlaceColor3")
            .addClass("changePlaceColor4");
            e.preventDefault();
          }
    });
  })
});

没有理由单独为每个字段添加验证，添加基本验证代码并循环遍历所有适用的字段。相同代码花费的时间越少，代码就越好

编辑:通过数据属性为每个输入自定义错误文本