Question

我的代码是用于表单验证。它运行良好但它非常冗长，如果我添加额外的字段意味着我想要添加更多的代码吗？所以我想简单。我可以减少这些代码吗？有人能给我一个想法，以简单的方式编写以下代码吗？

＆＃13;

$(document).ready(function(){
	    $('#fromDate').click(function(){
            $(this).addClass('visited');
        });
        $('#toDate').click(function(){
            $(this).addClass('visited');
        });
});
function apply(){  
        var FirstName=$('#name').val();
        if(FirstName==""){
            $('#name').addClass("error");  
        }else{
             $('#name').removeClass("error"); 
        }

        $('#fromDate').hasClass('visited')?$("#fromDate").removeClass("error"):$("#fromDate").addClass("error");
        $('#toDate').hasClass('visited')?$("#toDate").removeClass("error"):$("#toDate").addClass("error");

}

＆＃13;

.error{
	border:1px solid #FF0000 !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>Name</label>
<input type="text" name="fname" id="name">
<label>From</label>
<input type="date" name="" id="fromDate">
<label >Date To</label>
<input type="date" name="" id="toDate">
<button class="send" onclick="apply()">Send</button>
</form>

＆＃13;

Answer 1

你可以缩短它：

$(document).ready(function() {
  $('#fromDate, #toDate').click(function() {
    $(this).addClass('visited');
  });
});

function apply() {
  var FirstName = $('#name').val();
  $('#name').toggleClass("error", FirstName == "");

  $("#fromDate").toggleClass("error", !$('#fromDate').hasClass('visited'));
  $("#toDate").toggleClass("error", !$('#toDate').hasClass('visited'));

}

或者你可以在函数args中传递this：

<button class="send" onclick="apply(this)">Send</button>

现在在函数中：

function apply($this) {
  var $els = $this.siblings('input');
  $els.each(function(){
     $(this).toggleClass("error", $(this).val() == "");
  });
}

Jquery表单验证

1 个答案: