在ajax请求之前使用angularjs验证表单

Validate form using angularjs before ajax request

本文关键字：angularjs 验证 表单 ajax 请求      更新时间：2023-09-26

我有这样一个简单的表单。我使用angularjs通过ajax提交此表单。我想在发送ajax请求之前验证此表单，并需要向用户显示错误。我是棱角分明的新手。请帮我

这是我的密码。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script>
<div ng-app="Myapp">
    <div ng-controller="orderFormController">
        Item :   <input type="text" name="item"  ng-model='item' required> <p></p>
     Rate:   <input type="text" name="rate"  ng-model='rate' required> <p></p>
        <button type="button"  ng-click='saveorder()' >SAVE ORDER</button>
    </div>    
    <script>
        var Myapp = angular.module('Myapp', ["ngRoute"]);
        Myapp.controller('orderFormController', ['$scope', '$http', function ($scope, $http) {

            $scope.saveorder = function () {
                 // Validate form here and set the error in form
                 $http.post("order/save/", data).success(function (res, status, headers, config) {
                     $scope.message = res;
                }).error(function (data, status) { 
                    $scope.message = res;
                });
            }
        }]);
    </script>

非常简单的实现可以通过几个步骤完成：

  1. 使用具有name属性的<form>标记。在中使用saveorderng-submit属性
  2. 创建错误容器，并使其可见性取决于错误：<span class="error" ng-show="form.item.$error.required">

最终结果应该是：

<div ng-controller="orderFormController">    
    <form name="form" ng-submit="saveorder()">
        Item :   <input type="text" name="item"  ng-model='item' required> <p></p>
        <span class="error" ng-show="form.item.$error.required"> Item field is required!</span>
        Rate:   <input type="text" name="rate"  ng-model='rate' required> <p></p>    
        <span class="error" ng-show="form.rate.$error.required"> Rate field is required!</span>
        <button type="button">SAVE ORDER</button>
    </form>    
</div>

您可以阅读有关表单验证的Angular原生文档。这里提供了更多的细节。

阅读本文。。https://scotch.io/tutorials/angularjs-form-validation

它解释得很好，如果仍然存在困惑，请在付出一些努力后询问。

您应该使用角度形式验证，或者使用进行自定义验证

   var Myapp = angular.module('Myapp', ["ngRoute"]);
   Myapp.controller('orderFormController', ['$scope', '$http', function($scope, $http) {
   $scope.formdata = {};
   $scope.saveorder = function(formdata) {
       $scope.error = '';
       // Validate form here and set the error in form
       if (angular.isUndefined(formdata.item) == true || angular.isUndefined(formdata.rate) == true) {
           $scope.error = "Both Item and Rate are required."
           return false;
       } else {
           $scope.error = '';
       }
       $http.post("order/save/", formdata).success(function(res, status, headers, config) {
           $scope.message = res;
       }).error(function(status, res) {
           $scope.message = res;
       });
   }
   }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script>
<div ng-app="Myapp">
    <div ng-controller="orderFormController">
<span style="color:red">{{error}}</span><br>
        
        Item :   <input type="text" name="item"  ng-model='formdata.item' required> <p></p>
     Rate:   <input type="text" name="rate"  ng-model='formdata.rate' required> <p></p>
        <button type="button"  ng-click='saveorder(formdata)' >SAVE ORDER</button>
    </div>

相关文章：