Question

我是AJAX和JQuery的新手。我使用bootstrap设计了这个表单。现在我想在将每个输入字段发送到数据库之前检查每个输入字段。无论是否为空或有效的电子邮件等。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Record Loan Type Information</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">  
  <script src="js/moment.min.js"></script> <!-- bootstrap-datetimepicker requires Moment.js to be loaded first -->
  <script src="js/bootstrap-datetimepicker.min.js"></script>

 <script type="text/javascript">
        $(function () {
            $('#datetimepicker1').datetimepicker({format:"DD/MM/YYYY", useCurrent: false });
        });         
 </script>

<style>

 body {
  background-color: #584F39;
}
.panel.panel-primary {
  border-color: #73AD21;
}
.panel-group .panel .panel-heading {
  background: #73AD21;
}
.form-horizontal .panel.panel-primary {
  border-color: #73AD21;
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  .form-group-top {
    margin-top: 15px;
  }
}
</style>


</head>
<body >

<div class="container"  >  
    <div class="panel-group">
        <div class="panel panel-primary"  >
            <div class="panel-heading" >
                <h3 class="panel-title" style="text-align: center;">Record Loan Type Information</h3>       
            </div>

            <div class="panel-body">

                <form class="form-horizontal" >
                        <div class="form-group">
                         <label class="control-label col-sm-3"  for="acode">Loan ID:</label>
                         <div class="col-sm-5">

                               <input type="text" class="form-control" id="acode"  placeholder="Enter Loan ID">            

                         </div>
                        </div>              

                        <div class="form-group">
                            <label class="control-label col-sm-3" style="text-align:right;" >Loan Name:</label>
                            <div class="col-sm-5">

                                  <input type="text" class="form-control" placeholder="Enter Loan Name" >         

                            </div>      
                        </div>  

                        <div class="form-group">
                         <label class="control-label col-sm-3"  for="dcode">Description:</label>
                         <div class="col-sm-5">
                             <input type="text" class="form-control" id="dcode"  placeholder="Enter Loan Description">             

                         </div>
                        </div>  

                        <div class="form-group">
                            <label class="control-label col-sm-3" style="text-align:right;">Amount:</label>
                            <div class="col-sm-5">

                                  <input type="text" class="form-control" placeholder="Enter Amount" >        

                            </div>      
                        </div>  

                        <div class="form-group">
                           <label class="control-label col-sm-3" style="text-align:right;" >Sanction Date:</label>
                           <div class="col-sm-5">
                               <div class="input-group date">
                                   <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span> 
                                   <input type="text"  id='datetimepicker1' class="form-control" placeholder="DD/MM/YYYY">     
                               </div>
                           </div>
                       </div>

                       <div class="form-group">
                            <label class="control-label col-sm-3" style="text-align:right;">Interest Rate:</label>
                            <div class="col-sm-5">

                                  <input type="text" class="form-control" placeholder="Enter Rate" >          

                            </div>      
                        </div>  

                        <div class="form-group">        
                          <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary">Save</button>
                            <button type="button" class="btn btn-success">Edit</button>
                            <button type="button" class="btn btn-danger">Delete</button>
                            <button type="button" class="btn btn-info">Exit</button> 
                          </div>
                        </div>
                </form>
            </div>
        </div> 
    </div>    
</div>

</body>
</html>

我如何轻松地进行此类验证。如果您知道，那么请分享您的概念＆amp;关于this.thanks

的样本

Answer 1

我要处理的典型方法是jQuery是

抓住表单的submit事件。
以标准$('#id').val()方式收集输入值。
根据您需要的验证逻辑检查值。
如果出现问题，a）为用户创建错误消息，b）返回false（这将取消表单提交）
如果一切都过去了，要么让提交继续进行，要么通过AJAX处理，不过你正在这样做。

模拟这个的代码就像

//I would recommend giving the form an ID value.
$("form#id").on("submit", function() {
    //Get a value 
    var acode = $(this).find("#acode").val();
    //Validate it
    if ($.trim(acode).length == 0) {
        //Present an error message to the user
        //return false to cancel the submit
        return false;
    }

    //Continue with the other validations
    //......

    //Submit the form
    return true; //<==This will perform a normal HTML form submission.
});

此客户端验证将有助于提供良好的用户体验。但是，您还需要始终提供服务器端验证。

如何对此html表单进行最简单的ajax jquery表单验证

1 个答案: