使用angular应用表单字段客户端的验证

时间:2016-06-28 06:40:38

标签: jquery html angularjs

我正在写一个简单的表单,我希望将表单结果保存到数组中,同时更新名字和姓氏,如果其中一个或两个字段都为空,则应该抛出警告消息。并且数组不应该存储空值,我想在客户端处理它。我对如何在存储它们之前检查输入值感到困惑。 以下是代码段:https://jsbin.com/guduwakeji/edit?html,js,output



var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.ele = [];
  $scope.updateDetails = function(ele) {
    if (!ele.firstname && !ele.lastname) {
      alert("Ele cannot be empty");
    } else {
      ele.push({
        'firstname': '',
        'lastname': ''
      });
      alert(ele.firstname + "  " + ele.lastname);
    }
    console.log(ele);
  };

});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body ng-app="myApp">
  <div ng-controller="formCtrl">
    <div>
      First Name:
      <input type="text" ng-model="ele.firstname">
      </br>
      Last Name:
      <input type="text" ng-model="ele.lastname">
      <br/>
      <input type="button" value="Submit" ng-click="updateDetails(ele)">
    </div>
  </div>
</body>

</html>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

请参阅以下链接,您将了解它的工作原理以及您应该如何处理项目。

http://www.w3schools.com/angular/angular_validation.asp

查看这些网站,他们可能会帮助您。

https://docs.angularjs.org/guide/forms

答案 1 :(得分:0)

使用此代码

我想出了这种验证表格的方法

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.ele={};
    $scope.updateDetails = function(ele){
    if(ele.firstname &&  ele.lastname)
     { console.log(ele);}
      else{
        alert("empty field not allowed");
      }
    };

});