Question

我需要在2个字段中放置验证：

电话号码 - （a）应有10位数字，

（b）格式为：XXX-XXX-XXXX，

（c）如果（a）＆amp; amp; （b）不满意
电子邮件 - 应该有（a）无效的电子邮件格式（“@”之前/之后没有文字，“。”之后没有文字，“。”之前没有文字，但是在“@”之后没有文字。）

此外，只有当所有字段都有一些输入并且满足所有验证时，它是否应该在单击“提交”按钮时显示所有详细信息。

目前，即使某个字段不满足验证，单击“提交”按钮也会显示所有字段的详细信息。

我建议所有人尝试使用代码，测试输出以确切了解我的问题：

HTML：

<input type="text" id="firstname" required placeholder="Enter First Name" 
ng-model="firstname" oninvalid="this.setCustomValidity('Cannot leave blank')" 
oninput="setCustomValidity('')" />
<br>

<input type="search" required placeholder="Last Name" ng-model="lastname" 
oninvalid="this.setCustomValidity('Cannot leave blank')" 
oninput="setCustomValidity('')" />
<br>

<input type="text" required placeholder="Enter 10 digit no" ng-minlength="10" 
ng-maxlength="10" ng-model="phone" />

<input type="email" required placeholder="Email" ng-model="email" />
<span class="error" ng-show="myForm.input.$error.email">
      Not valid email!</span>
<br>

<input type="submit" value="Submit" ng-click="Search()">
<br>
<div ng-show="x">

  <div>
    First Name: {{fname}}
  </div>

  <div>
    Last Name: {{lname}}
  </div>

  <div>
    Phone No: {{phno}}
  </div>

  <div>
    Email: {{em}}
  </div>
</div>

JS SCRIPT：

(function() {

  // Module(No Global Namespace)
  var app = angular.module("githubViewer", []);

  var MainController = function($scope) {

    $scope.Search = function() {
      $scope.fname = $scope.firstname;
      $scope.lname = $scope.lastname;
      $scope.phno = $scope.phone;
      $scope.em = $scope.email;
    };



    phone = phone.replace(/[^0-9]/g, '');
    if (phone.length != 10) {
      alert("not 10 digits");
    } else {
      alert("yep, its 10 digits");
    }

    if ($scope.phone && $scope.firstname && $scope.lastname && $scope.email) {
      $scope.x = true;
    }


  };
  app.controller("MainController", MainController);

}());

AngularJS验证电话号码中的位数

0 个答案: